Echarts

CDN地址：https://www.bootcdn.cn/echarts/

1. 全局引入

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2. 按需引入

component.vue

var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/markArea');
require('echarts/lib/component/markLine');

---

echarts + 百度地图

1. public/index 中引用百度地图API文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak==密钥"></script>

2. 全局注册地图文件

main.js

import echarts from 'echarts'
import "echarts/extension/bmap/bmap";
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);
Vue.prototype.$echarts = echarts

3. 局部注册地图文件

component.vue

import echarts from 'echarts'
import "echarts/extension/bmap/bmap";
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);

坑：在 官方地图 demo 中，有些 function 中直接默认按需加载 echarts，如果全局引入的方式会报 echarts 未定义的错

改为箭头函数解决 this 丢失问题

var renderItem = (params, api) => {
        var coords = [
          [116.7, 39.53],
          [103.73, 36.03],
          [112.91, 27.87],
          [120.65, 28.01],
          [119.57, 39.95]
        ];
        var points = [];
        for (var i = 0; i < coords.length; i++) {
          points.push(api.coord(coords[i]));
        }
        var color = api.visual("color");
        return {
          type: "polygon",
          shape: {
          
            这里修改 echarts 为 $echarts
            points: this.$echarts.graphic.clipPointsByRect(points, {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height
            })
          },
          style: api.style({
            fill: color,
            stroke: this.$echarts.color.lift(color)
          })
        };
      };

---

简单Demo

1. 为 echarts 准备一个 DOM 容器

<div id="box">您的浏览器不支持 canvas，请升级浏览器</div>
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
<script>

 1. 使用 echarts.init 装载 DOM 初始化 echarts
  var box = echarts.init(document.getElementById('box'))

 2. 配置项
  var boxOption = {
    // 标题项
    title: {
      text: 'Echarts 入门'
    },
    // 工具总配置
    toolbox: {
      show: true,  // 是否显示工具箱
      // 各个功能配置
      feature: {   
        // 图片保存
        saveAsImage: {
          title: '保存为图片格式'
        },
        dataView:{},
      }
    },
    // 图例（整条数据的名字）
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['1', '2', '3', '4']
    },
    yAxis: {},
    // 数据
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 23, 2, 32]
    }]
  }
 3. 设置配置项
  box.setOption(boxOption)
  
</script>

标题 图例 工具箱
x轴 y轴 数据
数据： name type data

---

标题

https://echarts.apache.org/zh/option.html#title

工具箱

https://echarts.apache.org/zh/option.html#toolbox

feature

toolbox: {
  feature: {
    dataView: {},
    magicType: {
      type: ['line', 'bar']
    },
    saveAsImage: {},
  }

}

提示框

https://echarts.apache.org/zh/option.html#tooltip

tooltip: {
  

}

数据

series: [
  {
    name: '销量',
    type: 'line',
    data: [11, 22, 33],
    markPoint: {     标记点
      data: [
        { type: "max", name: '最大值' },
        { type: "min", name: '最小值' }
      ]
    },    
    markLine: {     标记线
      data:[
        {type: 'average' , name:'平均值'}
      ]
    }
  }
]

饼图
1.

---

vue中简单分装 echarts

+ src/components/CustomEcharts.vue

CustomEcharts.vue

<template>
  <div ref="refName"></div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/line');
require('echarts/lib/chart/radar');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/pictorialBar');
// 引入提示框和标题组件
require('echarts/lib/component/title');
require('echarts/lib/component/legend');

export default {
  props: ['refName', 'options'],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart(options,callback) {
      let myChart = echarts.init(this.$refs.refName);
      myChart.setOption(this.options);
      if(callback){
        callback(myChart)
      }
    }
  }
};
</script>
<style></style>

使用

xx.vue

<CustomEcharts :refName="" :options="options" />

<script>
import CustomEcharts from '@/components/CustomEcharts/'

export default {
  components:{
    CustomEcharts
  }
}