• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1-如何在vue中使用echarts

安装

npm install echarts --save

引入

//在main.js中引入
import echarts from 'echarts' 
Vue.prototype.$echarts = echarts

使用

//HTML
<div ref="chartDom" id="chartDom"  style="width:100%;height:100%" ></div>

//JS
data(){
    return{
        myChart:null
    }
}
//构建echarts时需要获取DOM,故需再次生命周期中执行构建echarts的方法
mounted(){
	this.loadChart()
},
//由于加载echarts性能损耗大，所以在切换至其他页面之前，取消对此页面的监听
beforeDestory(){
    if(this.myChart){
        return
    }
    window.removeEventListener("resize", function() {
        this.myChart.resize()
    });
}

methods: {
    //加载echarts
    loadChart() {
        const chartDom = this.$refs.chartDom; 
        //if判断，确保myChart容器生成后在进行初始化及相关配置的工作
        if (chartDom) {
            this.myChart = this.$echarts.init(chartDom);//初始化容器
            const option = {};//写你的图标的配置项数据,详见标题2
            option && this.myChart.setOption(option);//将配置渲染至容器里
            //通过对浏览器窗口的缩放扩大的监听，实现echarts的响应式
            window.addEventListener("resize", function() {
                this.myChart.resize();
            });
        }
    }
}

2-echarts主要配置项

在前端项目中，经常用到的统计图类型有有柱状图、饼图、折线图等
首先我们根据UI给出的设计图确定图表类型，在echarts官网示例中找到结构最接近的
在通过修改配置项，对其样式进行调整。

options配置项是一个echarts的灵魂所在，而且其配置项的api功能极其强大，几乎可以完成各种你想实现的样式及功能。

legend——图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

grid——坐标系内网格组件

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
可以在网格上绘制折线图柱状图

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件
在 ECharts 3 中可以存在任意个 grid 组件。

xAxis——grid中的x轴

一般情况下单个 grid 组件最多只能放上下两个 x 轴，X轴的相关样式都可以写在这里配置

yAxis——grid中的y轴

一般情况下单个 grid 组件最多只能放上下两个 y 轴，Y轴的相关样式都可以写在这里配置

title——标题组件

在 ECharts 3 中可以存在任意多个标题组件

option={
    title:[
        {标题一配置}，
        {标题二配置}，
    ]
}

serise——图表类型及相关配置

具体查看