vue---使用echarts绘制图形

echarts

提供了数据可视化图表（包括：折线图、柱形图、散点图、饼图、地图、热力图等等）

1、安装【npm install echarts --save】

2、引入

      ①全局引入：在【main.js】中引入将echarts直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts方式调用即可。

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts 即可

    ②局部引入：在使用页面引入

import echarts from 'echarts'

3、使用echarts绘制图形

       ①基于准备好的dom初始化echarts实例，通过 【echarts.init】 方法初始化一个 echarts 实例。

           【var myChart = echarts.init(document.getElementById(id), "light");】

     注意：容器dom一定要写出wigth,height样式，让容器具备大小

       ②通过 【setOption】方法绘制图形

           【 myChart.setOption(option);】【let option={....}】

4、option中常用组件/属性介绍

     （1）颜色主题：ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'

  使用方式：【var chart = echarts.init(dom, 'light')】

  （2）修改背景颜色：【backgroundColor: "#2c343c"】

  （3）设置文本样式：【textStyle: { color: "rgba(255, 255, 255, 0.3)" }】

  （4）配置阴影：

//阴影的配置
        itemStyle: {
          // 阴影的大小
          shadowBlur: 50,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: "rgba(0, 0, 0, 0.6)",
          // 通过 emphasis 属性来定制高亮
          emphasis: {
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.9)"
          }
        },

  （5）设置标签引导线

 labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
          }
        }

（6）常用组件

组件	常用属性	属性值
xAxis（直角坐标系 X 轴）	position：x 轴的位置。	top、bottom
	type:坐标轴类型	'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
	name:坐标轴名称
	nameLocation:坐标轴名称显示位置。	'start' 'middle' 或者 'center' 'end'
yAxis（直角坐标系 Y 轴）	position：y轴的位置。	left、right
	type:坐标轴类型	value、category、time、log 属性与xAxis.type相同
	name:坐标轴名称
	nameLocation:坐标轴名称显示位置。	'start' 'middle' 或者 'center' 'end'
grid（直角坐标系底板）	left/top/right/bottom:grid 组件离容器左/上/右/底侧的距离	数值，如20 百分比，如20% left属性值也可以是 'left', 'center', 'right' top属性值也可以是 'top', 'middle', 'bottom'。
series（系列）：一组数值以及他们映射成的图	type：图表类型	line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
	name:系列名称
	data:系列中的数据内容数组。数组项通常为具体的数据项	意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
	cursor	pointer
	stack:数据堆叠	同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
tooltip（提示框组件）	trigger	'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 'none'  什么都不触发。
	axisPointer:{}:坐标轴指示器配置项	axisPointer.type = 'line'  直线指示器 axisPointer.type = 'shadow'  阴影指示器 axisPointer.type = 'none'  无指示器 axisPointer.type = 'cross'  十字准星指示器
legend（图例组件）展现了不同系列的标记(symbol)，颜色和名字	type:图例的类型	'plain'：普通图例。缺省就是普通图例。 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用
	data:图例的数据数组	data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }]

5、实例：

<template>
  <div class="chart">
    <h1>ECharts学习</h1>
    <!-- 为echars准备一个容器dom，一定要给出大小 -->
    <div class="chart-wrapper">
      <div id="hisChart"></div>
      <div id="pieChart"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.drawHisChart("hisChart");
    this.drawPieChart("pieChart");
  },
  methods: {
    // 绘制柱形图
    drawHisChart(id) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id), "light");
      // 准备配置
      let option = {
        title: {
          text: "人流量统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          name: "时间"
        },
        yAxis: {
          type: "value",
          name: "人流量"
        },
        grid: {
          top: 70,
          left: "5%"
        },
        series: [
          {
            name: "AAA大厦",
            type: "bar",
            data: [51, 20, 36, 10, 10, 20, 3],
            barWidth: 15
          },
          {
            name: "BBB大厦",
            type: "bar",
            data: [20, 36, 10, 10, 20, 31, 12],
            barWidth: 15
          }
        ],
        dataZoom: [
          // slider只能拖动 dataZoom 组件导致窗口变化
          {
            // 这个dataZoom组件，默认控制x轴。
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            xAxisIndex: 0,
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          },
          //  inside 实现用滚轮（或移动触屏上的两指滑动）进行缩放，
          {
            // 这个dataZoom组件，也控制x轴。
            type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            xAxisIndex: 0,
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          },
          // slider只能拖动 dataZoom 组件导致窗口变化
          {
            // 这个dataZoom组件，默认控制x轴。
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            yAxisIndex: 0,
            start: 30,
            end: 80
          },
          //  inside 实现用滚轮（或移动触屏上的两指滑动）进行缩放，
          {
            // 这个dataZoom组件，也控制x轴。
            type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            yAxisIndex: 0,
            start: 30,
            end: 80
          }
        ]
      };
      // 使用这个配置，绘制图表
      myChart.setOption(option);
    },
    drawPieChart(id) {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById(id));
      let option = {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              {
                value: 235,
                name: "视频广告"
                // itemStyle: {
                //   color: "#c23531"
                // }
              },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" }
            ]
          }
        ],
        //阴影的配置
        itemStyle: {
          // 阴影的大小
          shadowBlur: 50,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: "rgba(0, 0, 0, 0.6)",
          // 通过 emphasis 属性来定制高亮
          emphasis: {
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.9)"
          }
        },
        //修改背景颜色
        backgroundColor: "#2c343c",
        // 设置文本样式
        textStyle: {
          // color: "rgba(255, 255, 255, 0.3)"
        },
        // 设置标签引导线
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
          }
        },
        itemStyle: {
          // 设置扇形的颜色
          color: "#c23531",
          shadowBlur: 200,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        },

        visualMap: {
          // 不显示 visualMap 组件，只用于明暗度的映射
          show: false,
          // 映射的最小值为 80
          min: 80,
          // 映射的最大值为 600
          max: 600,
          inRange: {
            // 明暗度的范围是 0 到 1
            colorLightness: [0, 1]
          }
        }
        // 设置 roseType 显示饼图将成南丁格尔图
        // roseType: "angle"
      };
      myChart1.setOption(option);
      // click事件
      myChart1.on("click", function(params) {
        console.log("1==", params.name);
        window.open(
          "https://www.baidu.com/s?wd=" + encodeURIComponent(params.name)
        );
      });
    }
  }
};
</script>
<style lang="less">
.chart-wrapper {
  display: flex;
  #hisChart,
  #pieChart {
    width: 800px;
    height: 600px;
    background: rgb(228, 223, 218);
    margin-right: 20px;
  }
}
</style>

    参考：  echarts--option