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、实例：

    参考：  echarts--option