vue 中 EChart 的使用，简单实例

1、npm 安装 ECharts

命令： npm install echarts --save

2、引入 ECharts

在 main.js 中通过

	import echarts from "echarts";Vue.prototype.$echarts = echarts;

3、定义盒子存放图表

	<template><div class="home"><!-- 定义的容器 --><div id="myChart" style="width: 600px;height:400px;"></div></div></template>

4、初始化 EChart 图表

	let myChart = this.$echarts.init(document.getElementById("myChart"));

5、指定图表的配置项和数据

	var option = {// 标题title: {// 主标题text: "某地区蒸发量和降水量",// 副标题subtext: "纯属虚构"},// 气泡提示tooltip: {// axis 指的是在轴上显示   item 指的是鼠标在内容上显示（默认）trigger: "axis"},// 图例legend: {data: ["蒸发量", "降水量"]},// 右上角的工具toolbox: {// 是否显示工具箱 true显示 false不显示show: true,// 提供哪些工具feature: {// 数据视图dataView: {// 是否显示show: true,// 是否只读 false可修改  true只读readOnly: false},// 切换样式magicType: {// 显示柱状图 图标和折线图 图标show: true,// 定义切换类型 line折线图 bar柱状图type: ["line", "bar"]},// 相当于刷新 还原restore: { show: true },// 下载图标 点击下载成图片saveAsImage: { show: true }}},// 是否实现拖拽重新计算calculable: true,// X坐标轴xAxis: [{// 类别type: "category",// 定义数据data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月", "10月","11月","12月"]}],// Y坐标轴yAxis: [{type: "value"// 定义data 就是自己设置的，不定义就是自动设置}],// 序列series: [{// 与上面图例里的要一致name: "蒸发量",// 显示类型type: "bar",data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],// 标注  的数据数组。每个数组项是一个对象markPoint: {data: [{ type: "max", name: "最大值" },{ type: "min", name: "最小值" }]},// 标线markLine: {data: [// 支持 'average', 'min', 'max'{ type: "average", name: "平均值" }]}},{// 与上面图例里的要一致name: "降水量",// 显示类型type: "bar",data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],// 标注markPoint: {data: [// 自己设置值 与xAxis 索引 yAxis 索引{ name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },{ name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }]},// 标线markLine: {// type 支持 'average', 'min', 'max'data: [{ type: "average", name: "平均值" }]}}]};

6、将实例化的 ECharts 图表设置图标配置项，同时在 dom 中渲染图表显示

	myChart.setOption(option);

7、总代码

<template><div class="home"><!-- 定义的容器 --><div id="myChart" style="width: 600px;height:400px;"></div></div>
</template>
<script>
// @ is an alias to /src
export default {name: "Home",mounted() {this.SetEchart();},methods: {SetEchart() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById("myChart"));// 绘制图表var option = {// 标题title: {// 主标题text: "某地区蒸发量和降水量",// 副标题subtext: "纯属虚构"},// 气泡提示tooltip: {// axis 指的是在轴上显示   item 指的是鼠标在内容上显示（默认）trigger: "axis"},// 图例legend: {data: ["蒸发量", "降水量"]},// 右上角的工具toolbox: {// 是否显示工具箱 true显示 false不显示show: true,// 提供哪些工具feature: {// 数据视图dataView: {// 是否显示show: true,// 是否只读 false可修改  true只读readOnly: false},// 切换样式magicType: {// 显示柱状图 图标和折线图 图标show: true,// 定义切换类型 line折线图 bar柱状图type: ["line", "bar"]},// 相当于刷新 还原restore: { show: true },// 下载图标 点击下载成图片saveAsImage: { show: true }}},// 是否实现拖拽重新计算calculable: true,// X坐标轴xAxis: [{// 类别type: "category",// 定义数据data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月", "10月","11月","12月"]}],// Y坐标轴yAxis: [{type: "value"// 定义data 就是自己设置的，不定义就是自动设置}],// 序列series: [{// 与上面图例里的要一致name: "蒸发量",// 显示类型type: "bar",data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],// 标注  的数据数组。每个数组项是一个对象markPoint: {data: [{ type: "max", name: "最大值" },{ type: "min", name: "最小值" }]},// 标线markLine: {data: [// 支持 'average', 'min', 'max'{ type: "average", name: "平均值" }]}},{name: "降水量",type: "bar",data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],markPoint: {data: [{ name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },{ name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }]},markLine: {data: [{ type: "average", name: "平均值" }]}}]};myChart.setOption(option);}}
};
</script>