简单配置echarts 图

                # echarts 的简单使用 

使用（vue中）：

• 1. npm install echarts -S
• 2. mian.js中引用 import './echarts'
• 3. 构建一个echarts 的实例 # 1. <div id="myChart" ref='myChart' :style="{width: '300px', height: '300px'}"></div> import Echarts from "echarts"; data(){ charts : null } export default { this.charts = echarsts.init(this.$refs.myChart) const chartsOptions={ legend:{}, gird:{}调整图例距离边框距离 xAxis:{ x轴的配置 } yAxis:{ y轴的配置 } tootipp：{ hover显示的内容配置 可用formatter进行自定义配置 值可以重data中取 可在自定义中写 html需``要加上引号 } series：{可在中传入需要展示的数据 data ：xxxx 配置markline 设置需要暂时的图例类型 type：line}
  } this.charts.setOption(chartsOptions) 构建图例 }

•    echarts自适应的  “resize- observer - polyfill” 能很好的解决echarts 在屏幕被拉伸 缩小的情况下变化自身图例大小
  

•    使用：npm install resize-observer-polyfill --save-dev
  

•    使用的页面中引用
  

•           import ResizeObserver from 'resize-observer-polyfill';
  

•           在项目中使用
  

•           this.myObserver = new ResizeObserver (this.charts.resize)
  

•           this.myObserver = observe(this.$refs.myChart)
  

•        可以配合flex布局使用
  

1. 后台管理项目常用echarts 样式

1.折线图

 后台管理项目最常见数据展示图例
  在series中将type设置为‘line’
  symbolSize可以设置折点的大小 
  linestyle 设置折现的样式
  

同理itemStyle设置折点颜色以及样式
当数据过多折点不会全部显示配置 series.showAllSymbol

说明：显示数据点，只在主轴为类目轴（axis.type为'category'）时有效

2.bar 柱状图

   将type设置为 bar 
   barWidth 设置柱子的宽度 可以百分比
   show：显示柱状图的数据
   position：top显示在上方
   textStyle 显示数据的样式

3.custom 直方图

设置直方图的x轴的起点终点 以及y轴的数据取值 series中将type 设置为custom renderitem:引用 encode设置数据格式为[xstart,xend,yvalue]

3.pei 饼状图

3.scatter 散点图

将series的type设置为scatter 其data数据格式为[[x,y],[x,y]]