Echarts数据可视化

1.Echarts的概念

      ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2.Echarts的特点（特性 - Apache ECharts）

• 开源免费
• 功能丰富，丰富的可视化类型（折线图、柱状图、饼图、k线图…… ），图表涵盖了各个行业，满足了不同的需求
• 多种数据格式支持（key-value数据格式、二维表、TypeArray格式）
• 更好的支持流数据的动态渲染，增量渲染技术
• 特效更加炫酷
• 可以跨平台使用

3.Echarts的基本使用

1. 获取echarts

   npm install echarts --save

2. 引入Echarts

   import * as echarts from 'echarts';
   

3. 准备一个图表盒子

     <div id="main"></div>

4. 初始化echarts实例对象

   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));

5. 准备配置项https://echarts.apache.org/zh/option.html#title

   var option = {
   title: {
       text: 'ECharts 入门示例'
     },
     tooltip: {},
   //x轴
     xAxis: {
       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
     },
   //y轴
     yAxis: {},
   //系列列表，给y轴提供数据
     series: [
       {
         name: '销量',
   //图表类型（柱状图bar）
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20]
       }
     ]
   } 

   配置项基本使用
   1. xAxis:直角坐标系中的 X 轴 （type：vcategory（类目轴）data：[“类名1”，“类名2”]）
   2. yAxis:直角坐标系中的 y轴（type：value（数值轴））
   3. 规定了数值轴，在配置series里面添加data属性，写具体值，type可以设置类型（饼图：pie、折线图：line、柱状图：bar）   

          通用配置：

             title：文字样式 textStyle：color

                       标题边框 borderWidth：5；borderColor:''blue"

                       标题位置 left top right bottom

            tooltip：提示框组件，用于配置鼠标滑过或者点击图标时的显示框

                         触发类型：trigger，属性值：item，axis

                         触发时机：triggerOn，属性值mouseover、click

                         格式化：formatter ，属性值：字符串模板、回调函数（arg）

           toolbox:Echarts提供的工具栏

                       feature(工具栏按钮)

                       导出图片 saveAsImage：{}

                       数据视图 dataView：{}

                        动态类型切换 magicType：{

                                                  type:["bar","line"]

                                                  }

                        数据区域缩放  dataZoom：{}

                         重置 restore：{}

        legend 筛选：{data:['','']}

tooltip: {
   // trigger:"item",
   trigger: 'axis',
   triggerOn: 'click',
   // formatter:{b} 的成绩是 {c}
   formatter: function(arg){
     return arg[e].name +，的分数是:’+ arg[e].data
   }
},

1. 将配置项设置给echarts实例对象

   myChart.setOption(option);

   tips:除了配置项会变化之外，其他的代码都是固定的，配置项需参考官方文档

2. Echarts常用图表
   1. 仪表盘图
   2. 雷达图
   3. 地图
   4. 饼图
   5. 散点图
   6. 折线图
   7. 柱状图
      1. 常见效果
         • 标记：最大值 最小值 平均值

           markPoint: {
             data: [
              {
                type:"max"，name:"最大值"
              },{
                type:"min",name:"最小值"
              }
             ]
           },
           markLine: {
           data:[
             {
              type: "average"，name:"平均值"
             }
           ]
           }

      2.     显示：数值显示 柱宽度 横向柱状图 

         label:{
           //数值显示
            show: true,
           //数值显示旋转角度
            rotate: 68，
           //标签的位置
            position："inside"
         }，
         //柱宽度
         barWidth:'30%'
         //横向柱状图需要互换x轴和y轴的角色