Vue中echarts的使用

1、npm安装echarts

npm install echarts

2、main.js 中引入配置

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、在组件.vue中使用

        1>存储图像容器创建

        外面是Vue内容，可换其它包裹（也可不包裹），主要是中间那一行

      <template>
        <el-form ref="form" label-width="80px">
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-form>
      </template>

        2>js中对容器进行赋值渲染

        option中内容可去官网参考更换

官网：Apache ECharts

let myChart = this.$echarts.init(document.getElementById('main'));
        /*
        监听图表容器的大小并改变图表大小
        window.addEventListener('resize', function() {
          myChart.resize();
        });
        */
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: "项目供水量",
          },
          tooltip: {},
          legend: {},
          xAxis: {
            data: xData
          },
          yAxis: {
            type: "value",
            name: "单位（m³）",
          },
          series: [
            {
              data: yData,
              type: 'bar',
              stack: 'x'
            }
          ]
        };
        myChart.setOption(option);

完成