vue 中 EChart 的使用，柱状图实例

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>