当前位置:   article > 正文

Vue - Echarts 5.0 安装与使用(异步加载数据)_erchart 版本5.0.0安装

erchart 版本5.0.0安装

demo 地址: https://github.com/iotjin/jh-vue-demo

一、 安装ECharts 组件

打开终端,输入vue ui,会自动打开vue-cli 图像化界面

vue ui
  • 1

选择项目,添加ECharts 插件
在这里插入图片描述
我使用的是Echarts(不是vue-echarts)
在这里插入图片描述

二、使用

主要是导入方式和5.0以下版本有差异,需要使用下面的方式

import * as echarts from "echarts";
  • 1

demo
在这里插入图片描述

在这里插入图片描述

<template>
  <div>
    <!-- <div>图表</div> -->
    <div id="myChart" class="charts"></div>
    <div class="btn" @click="onClick">获取数据</div>
  </div>
</template>

<style>
.charts {
  width: 100vw;
  height: 400px;
}
.btn {
  width: 100px;
  height: 30px;
  background: yellow;
}
</style>

<script>
import * as echarts from "echarts";

export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      myChart: null,
    };
  },
  mounted() {
    console.log("初始化");

    // this.drawLine();
    this.init_echarts1();
  },
  methods: {
    onClick() {
      console.log();
      this.requestData();
    },
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    //初始化图表
    init_echarts1() {
      var chartData = {
        title: "某地区蒸发量和降水量",
        legendData: ["蒸发量", "降水量"],
        xData: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        seriesData: [],
      };
      this.myChart = echarts.init(document.getElementById("myChart"));
      this.myChart.setOption(this.getOption1(chartData));
    },
    //图表配置
    getOption1(chartData) {
      var option = {
        color: ["#3398DB", "#EB5E5E"],
        title: {
          left: "center",
          text: chartData ? chartData.title : "默认标题",
        },
        grid: {
          left: "3%",
          right: "2%",
          containLabel: true,
        },
        //坐标轴触发,。   'item'  , 'axis' ,'none'
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: 10,
          data: chartData.legendData,
        },
        xAxis: [
          {
            data: chartData.xData,
            axisLabel: {
              interval: 0,
            },
          },
        ],
        yAxis: {},
        series: chartData.seriesData,
      };
      return option;
    },

    requestData() {
      var dataArr = [
        {
          name: "蒸发量",
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3,
          ],
        },
        {
          name: "降水量",
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3,
          ],
        },
      ];
      for (var i = 0; i < dataArr.length; i++) {
        var dic = dataArr[i];
        dic["type"] = "bar";
        dic["label"] = {
          show: true, //开启显示
          position: "top", //在上方显示
          distance: i == 0 ? 5 : 10,
          // rotate: 15,
          // offset: [20, 0],
          formatter: function(val) {
            if (val.value !== 0) {
              return val.value;
            } else {
              return "";
            }
          },
          fontSize: 12,
          color: "black",
        };
      }
      var chartData = {
        title: "某地区蒸发量和降水量",
        legendData: ["蒸发量", "降水量"],
        xData: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        seriesData: dataArr,
      };

      this.myChart.setOption(this.getOption1(chartData), true);
    },
  },
};
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/769371
推荐阅读
相关标签