Vue数据可视化——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]
                    }]
                };

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

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.$属性名” 来使用。