Vue数据可视化——ECharts

参考ECharts官方文档

本文完整示例代码：

<template>
  <div>
  	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="echarts" style="width: 600px;height:400px;"></div>
    <input type="button" @click="mcharts" value="显示图表">
  </div>

</template>

<script>
	<!-- 引入 echarts -->
    import * as echarts from 'echarts';
    export default {
        name: "echarts",
        methods:{
            mcharts(){
            	<!-- 基于准备好的dom，初始化echarts实例 -->
                const myChart = echarts.init(document.getElementById('echarts'));
                <!-- 指定图表的配置项和数据 -->
                const option = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    xAxis: {    //  x轴的下标
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {    //  y轴
                        type: 'value'
                    },
                    series: [{   //  y轴的数据
                        name: '销量',
                        type: 'line',    //  bar为柱状图，line为折线图，pie为饼图
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                <!-- 使用刚指定的配置项和数据显示图表 -->
                myChart.setOption(option)
            }
        }
    }
</script>

<style scoped>

</style>

代码效果

一、 Vue引入ECharts

1、项目中安装echarts依赖

npm install echarts -S

2、在使用ECharts的组件中引入（按照最新v5版本）

（1）全部引入

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');

（2）局部按需引入

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);

注意：
v5版本去除default exports 的支持，所以不再支持import echarts from 'echarts'; 或者import echarts from 'echarts/lib/echarts';（按需引入）

二、准备一个呈现图标的盒子

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

三、初始化ECharts实例对象

//document.getElementById('echarts')决定图表呈现的位置
var myChart = echarts.init(document.getElementById('echarts'));

四、准备配置项

		var option = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    xAxis: {    //  x轴的下标
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {    //  y轴
                        type: 'value'
                    },
                    series: [{   //  y轴的数据
                        name: '销量',
                        type: 'line',    //  bar为柱状图，line为折线图，pie为饼图
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };

配置项参数讲解

echarts使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。option 常用的组件如下：

● title：为图表配置标题

title: {
    text: '第一个 ECharts 实例'
}

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

● tooltip：鼠标移上去的提示

● xAxis：配置要在 X 轴显示的项

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

● yAxis：配置要在 Y 轴显示的项

● series：装载数据

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

五、使用刚指定的配置项和数据显示图表

myChart.setOption(option)

附

还有一种全局引入Echarts的方法，这样不用在每个页面都重复引入ECharts。

1、在main.js引入echarts并作为全局属性

//main.js文件
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

2、在组件中直接使用

 const myChart = this.$echarts.init(document.getElementById('echarts'))

注意：
在组件中使用时必须用this.$echarts，因为自定义挂载在Vue的全局属性必须用 “this.$属性名” 来使用。