Vue中使用Echarts

• type: 'bar'：柱状/条形图

• type: 'line'：折线/面积图

• type: 'pie'：饼图

• type: 'scatter'：散点（气泡）图

• type: 'effectScatter'：带有涟漪特效动画的散点（气泡）

• type: 'radar'：雷达图

• type: 'tree'：树型图

• type: 'treemap'：树型图

• type: 'sunburst'：旭日图

• type: 'boxplot'：箱形图

• type: 'candlestick'：K线图

• type: 'heatmap'：热力图

• type: 'map'：地图

• type: 'parallel'：平行坐标系的系列

• type: 'lines'：线图

• type: 'graph'：关系图

• type: 'sankey'：桑基图

• type: 'funnel'：漏斗图

• type: 'gauge'：仪表盘

• type: 'pictorialBar'：象形柱图

• type: 'themeRiver'：主题河流

• type: 'custom'：自定义系列

局部引用

var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

在html模板中定义一个DOM元素，元素需要给定一个宽和高

<template>
  <div id="cottonbar" style="width: 600px;height:400px;"></div>
</template>

Vue中需要在组件挂载到实例对象后，进行图表的渲染

  mounted() {
    var myChart = echarts.init(document.getElementById("cottonbar"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },

tooltip参数

参考 https://www.jianshu.com/p/27ad0c1c82c3

这个是一个钩子函数，当用户点击对应的数据时，进行的操作

//hover事件时，打印对应的数据
tooltip: {
        formatter(params) {
          console.log(params);
          ///
        },

图表组件化

组件化一个折线图

参考

1. Vue组件重复使用echarts