echarts

柱状图

柱状图 折线图 最大值，最小值，平均值

series:[
	     {  
             name: '销量',
    	     type: 'bar', //柱状图
             data: [5, 20, 36, 10, 10, 20],
             markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  { type: 'min',name: '最小值'}
                ]
          	},
             markLine: {
                data: [
                  {type: 'average',name: '平均值' }
                ]
             },
             label: {
               show: true,  //柱子上的数值显示
               rotate: 60,  //数值旋转
               position: 'top'  //数值在上方显示
             },
             barWidth: '30%'   //柱子的宽度
     }
]

柱状图 横向柱状图（x和y轴互换）

 xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },

通用配置-标题title 样式

 title: {
        text: 'ECharts 入门示例',  //文本
        textStyle: {
          color: 'red'  //文字颜色
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },

通用配置-tooltip 提示框

  tooltip: {
        // trigger: 'item'  //鼠标移动柱子上有提示信息   在柱子上
         trigger: 'axis'  //鼠标移动柱子上有提示信息     在柱子的一条线上
         triggerOn: 'click', //点击有提示信息 
         formatter: '{b}:{c}'  //提示信息进行修改  格式数据
         formatter: function(arg) {  //回调函数，可以打印这条柱子上的信息
          console.log(arg)
          return arg[0].name   //手动格式
        }
      },

通用配置-toolbox 工具 导出图片 数据视图 …

 toolbox: {
        feature: {
          saveAsImage: {},  //导出图片
          dataView: {},   //数据视图
          restore: {},  //重置
          dataZoom: {},  //区域缩放
          magicType: {
            type: ['bar', 'line']
          }  //动态图片类型的切换
        }
      },

通用配置 -legend 图例

 两条数据语文和数学
 series: [
        {
          name: '语文',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '数学',
          type: 'bar',
          data: [12, 25, 45, 78, 88, 99]
        }
  ],
  legend: {  //图例要根据series的name来写
     data: ['数学', '销量']
  }

折线图

堆叠图

 series: [
     {
		type: 'line', //折线图
		stack: 'all',  //堆叠图  两个条形图因为数据不一样，就会交错在一起，设置了这个，就是上下形式的
     },
      {
		type: 'line', //折线图
		stack: 'all',  
     },
 ]

markArea 标注区间 线条的控制 区域填充风格

series: [
        {
           markArea: {
                data: [
                  [
                    {
                      xAxis: 12   开始
                    },
                    {
                      xAxis: 25   结束
                    }
                  ],
                  [
                    {
                      xAxis: 88
                    },
                    {
                      xAxis: 99
                    }
                  ]
                ]
           },
          smooth: true,  //平滑的折线
          lineStyle: {   //线的风格
            color: 'green',  
            type: 'dashed' //点线   solid dotted  
          },
         areaStyle: { //区域填充风格
             color: 'pink' 
         }
      }
   ]

紧挨边缘 缩放 :脱离0值比例

  xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        boundaryGap: false  //紧挨边缘
    },
  yAxis: {
        type: 'value',
        scale: true   //缩放  ,从最小值开始
  },

散点图

 series: [
     {
		//type: 'scatter', //散点图
         type:'effectScatter',  //涟漪动画的散点
         showEffectOn:'emphasis',  //render   emphasis   鼠标移上去才触发涟漪动画
         rippleEffect:{
         	scale:10
         }
         data:[],
         symbolSize:function(arg){   //气泡的大小   根据体重来
             var height=arr[0]/100
             var wight=arr[1]
             //bmi计算=体重kg/(身高cm*身高cm)
             if(bmi>28){
                 return 20
             }
             return 5
         },
         itemStyle:{  //气泡的颜色
             color:'green',
             color:function(arg){ //颜色回调
                 return 'pink'
             }
         }
     }
 ]
 缩放 :脱离0值比例  scale: true 

直角坐标系（x轴和y轴） ：柱状图，折线图，散点图

网络 grid

 grid: {
        show: true,
        borderWidth: 10,
        borderColor: 'red',
        left: '50',
        top: '50',
        height: '100'
  },

坐标轴 axis

 xAxis: {
        type: 'category', //category类目轴  改类型必须通过data设置类目数据  需要指定data
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        boundaryGap: true,
        position: 'top'  //在上边显示
  },
 yAxis: {
       type: 'value',  //value数值轴 自动从目标数据中读取数据  不需要指定data，自动匹配series里面的data
       scale: true,
       position: 'right'  //在右边显示
  },

区域缩放dataZoom

 dataZoom: [
        {
          type: 'slider' , //滑块缩放
          //type: 'inside'  //内置  鼠标控制缩放
           xAxisIndex: 0  指明产生的轴，不指定默认x轴
        },
        {
          type: 'slider',
          yAxisIndex: 0,  //指明产生的轴，不指定默认x轴
          start: 0,  //指明初始状态的缩放情况  开始  百分比
          end: 90  //结束
        }
],

饼图

 var pieData =[ {name: '淘宝',value: 888}]
 series: [
        {
          type: 'pie',
          data: pieData,
          label: { //提示信息的格式
            show: true, //显示文字
            formatter: function(arg) {
              console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
         //圆环
         radius: '50%' // 百分比参照的是宽度和高度中较小的那一部分的一半来经行百分比设置
         radius: ['50%', '75%']  第0个元素代表内圆的半径，第1个元素外圆的半径
         //男丁格尔图
         roseType: 'radius',  //每一个区域的半径是不一样的
         // 选中的效果，能够将选中的区域偏离圆点一小段距离
         selectedMode: 'single'    //点击离开，点另外一个和上
         selectedMode: 'multiple',  //点击离开，再点击合上
         selectedOffset: 30   //偏离的距离
        }
      ],

地图

echarts要安装4.8版本的
1.安装：npm install echarts@4.8
2.先要引入echarts和china.js
   import echarts from 'echarts'
   import 'echarts/map/js/china.js'//中国地图
 3. <div :style="{ height: '400px', width: '100%' }" ref="myEchart"></div>
 4.配置option
 
 geo:{
 	type:'map',
 	map:'china',
 	roam:true, //设置允许缩放以及拖动的效果
 	label:{ //名称显示
 		show:true
 	},
 	zoom:2, //初始化缩放比例
 	 center: [63.555, 25], //地图中心的设置
 }

图表自适应

//监听window窗口大小变化的事件
方法一
    window.onresize=function(){
        myCharts.resize()
    }
方法二
	window.onresize=myCharts.resize

图表加载动画的实现

显示加载动画  myCharts.showLoading()  在获取数据之前
隐藏加载动画  myCharts.hideLoading()  当服务器获取数据之后

增量动画

改变option的值，再调用myCharts.setOption(option)
myCharts.setOption(option)
setOption可以设置多次，新的option和旧的option并不是相互覆盖的关系，是相互整合的关系
我们在设置新的option的时候，只需要考虑到变化的部分就可以了

动画配置

开启动画  animation:true
动画时长  animationDuration:8000
缓动动画  animationEasing:'bounceOut'
动画阈值  animationThreshold:8   单种形式的元素数量大于这个阈值时会关闭动画

echarts首次加载不显示的问题

问题：echarts图表首次加载不显示，浏览器窗口动一下就出现了（因为做了窗口监听事件）

窗口监听事件
window.addEventListener(‘resize’, this.resizeTheChart)
封装的resize()方法
resizeTheChart() {
chart.resize()
}

解决方法：就是首次加载图表时，手动调用一次resize()改变图表大小的方法
我加了也没有用，后来仔细的看了一下代码，echarts图应该是在mounted调用，而我提前调用了，dom没渲染出来，而我的需求必须提前调用，后来我就把这个chart.setOption(this.option) 放到this.n e x t T i c k ( ) 中 就 o k 了 t h i s . nextTick()中就ok了 this.nextTick()中就ok了this.nextTick(() => {
chart.setOption(this.option)
})

echarts图表链接
http://echarts.zhangmuchen.top/#/index
https://blog.csdn.net/IDOshi201109/article/details/122838792