Vue_echarts安装及使用

安装

npm install echarts --save

引入

在vue的main.js中引入echarts

import * as echarts from 'echarts';//5.0.0以上版本
import echarts from 'echarts'//5.0.0以下版本
Vue.prototype.$echarts=echarts;//绑定到vm上

使用

需要在mounted中声明(查找dom的id)，created中报错

 mounted() {
    this.initDataSecond();
  },

HTML

<div id="myChart1"></div>

css

#myChart1 {
  width: 600px;
  height: 400px;
}

JS

 initDataSecond() {
      var mychart = this.$echarts.init(document.getElementById("myChart1"));//绑定到id上
      var option = {
        title: {
          text: "Demo",
        },
        tooltip: {},//鼠标经过时显示信息
        xAxis: {
          data: ["vue", "react", "jquery", "js"],//x轴
        },
        yAxis: {},//y轴
        legend: {
          data: ["人数"],
        },//条形图上方的实例
        series: {
          name: "人数",
          type: "bar",//条形图
          data: [200, 149, 40, 513],
        },//数据
      };
      mychart.setOption(option);
    },

效果