《前端》Echarts基础笔记（有道）

Echart安装：

https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
    （安装完成后 ECharts 和 zrender 会放在 node_modules 目录下，
    我们可以直接在项目代码中使用 require('echarts') 来使用。）

配置手册：

https://www.echartsjs.com/zh/option.html

基本概念：

ECharts Documentation  https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88
 

ECharts 配置语法：

 第一步：创建 HTML 页面，引入 echarts.min.js。

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器。

         id 为 main 的 div 用于包含 ECharts 绘制的图表

第三步: 设置配置信息。

        ECharts 库使用 json 格式来配置。  

    echarts.init(document.getElementById('main')).setOption(option);

        这里 option 表示使用 json 数据格式的配置来绘制图表。

var option = {  以下内容  }

为图表配置【标题】和副标题：

    title: {
        text: '第一个 ECharts 实例',
        subtext: '纯属虚构'
    }

以下是图例组件：

展现不同系列的标记(symbol)(颜色和名字)。可以通过点击图例控制哪些系列不显示。组件在系列之上，echarts 中各种内容，被抽象为“组件”。
 如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、            angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、            dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...
其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。

配置提示信息

：https://www.echartsjs.com/zh/option.html#polar.tooltip.formatter 

 tooltip: {
     show:true,
     trigger:'axis',
     //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
     confine: true,  
     // 是否将 tooltip 框限制在图表的区域内。
     enterable: true,
     //鼠标是否可进入提示框浮层中，默认false，如需详情内交互、添加链接，按钮，可设置为 true。
     triggerOn: 'click',
     //triggerOn:默认为hover，将tooltip的Hover事件改为点击事件可设置为click.
     formatter: function (params, ticket, callback) {
         //              数据集 异步回调标识 异步回调
         var tipString = params[0].axisValue + "<br />";
         var key = "value";
         // 排序 
         params.sort(function (obj1, obj2) {
             var val1 = obj1[key];
             var val2 = obj2[key];
             if (val1 < val2) {
                 return 1;
             } else if  (val1 > val2) {
                 return -1;
             } else {
                 return 0;
             }
         })

         var indexColor;
         for (var i = 0, length = params.length; i < length; i++) {
             indexColor = params[i].color;
             tipString += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + indexColor + '"></span>';
             tipString += '<span data-type ="lineTip" data-val=' + params[i].value + '>' + params[i].seriesName + '：' + params[i].value + '</span><br />';
         }
         return tipString;
      }
},

关于Echarts中formatter实现动态数据的方法_JavaScript_kirinlau的专栏-CSDN博客  https://blog.csdn.net/kirinlau/article/details/78732329

图例

    //图例
    legend: {
        data: [{
            //名字不是随便起的。
            name: '系列1',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置图例文本颜色（这里不是折线颜色）
            textStyle: {
                color: 'red'
            }
         }]
      }

X 轴:  

直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值 。

横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型 。

    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    }

Y 轴：

         直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值  。
         纵轴通常为数值型，但条形图时则纵轴为类目型。

    yAxis: {}

系列列表：

series是一个对象嵌套的结构；对象内包含对象  。下面的例子有“蒸发量”和“降水量”两个系列名称。

折线图颜色设置见：https://blog.csdn.net/bellediao/article/details/106331542

series: [
    {
         //系列名称，如果启用legend，该值将被legend.data索引相关  
         name: '蒸发量',
         //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
         type: 'bar',
         //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
         //系列中的数据标注内容  
         markPoint: {
             data: [
                 { type: 'max', name: '最大值' },
                 { type: 'min', name: '最小值' }