vue中使用echart及常见问题

基本使用

• 安装

npm install echarts

• 创建实例(实现一个简单的柱形图)

<!--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width: 600px;height:400px;"></div>

mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      color: ["#3398DB"],
      title: {
        text: "进六个月访问量"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      yAxis: [
        {
          type: "value"
        }
      ],
      xAxis: {
        data: ["1月", "12月", "3月", "4月", "5月", "6月"]
      },
      series: [
        {
          name: "次数",
          type: "bar",
          data: [125, 200, 361, 170, 784, 548]
        }
      ]
    });
  }

更多参数配置可以访问官方文档

常见问题

1. 实现数据的实时更新：可以根据自己的业务使用定时器或者webscoket实现数据的实时更新。
2. 自适应问题：

window.onresize = function() {
      myChart.resize()
    }

3.引入地图：echarts自带中国地图，引入后设置series即可。

import "echarts/map/js/china";
<!--option中同时设置series的type为map，map为china（这里我们以中国地图为例）-->