• echarts入门到实战

    官网地址：Apache ECharts

    前言

    我们应该经常看到或听到”数据可视化“这个词，他其实就是将数据通过各种图表更加直观的展现变化趋势，对比，峰值等等。数据可视化也是未来的趋势。

    作为前端程序员，数据可视化也是我们必备的一个技能，怎么获取这个技能呢，其实我们只需要掌握一个图表库即可。目前，最常用的图表库是echarts。下面就从三个方面去认识这个图表库

    1.helloworld

            ->代码层面：有一个整体的印象

            ->看到效果，可以激发我们的学习兴趣

    2.整体认知

            ->对主干知识进行一一解说

            ->新手不至于迷失在海量的api中

            ->达到效果：对echarts有一个整体的认知，而不是零散的知识

    3.实战开发

            ->模拟工作中开发图表的过程

            ->注意：工作中开发一定不是一行一行代码敲出来的，一定有技巧的，这个后面具体再讲

    helloworld

    1.安装：npm install echarts --save

    2.引入：import * as echarts from 'echarts';

    3.初始化：

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    4设置配置项：

    myChart.setOption({

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

       yAxis: {},  

       series: [    

              {       name: '销量',      

                      type: 'bar',      

                      data: [5, 20, 36, 10, 10, 20]    

              }  

       ]

    });

    整体认知

    下面就是从echarts中抽离出来的主干知识：

    图表容器，样式，数据集，数据转换，坐标轴，视觉映射，图例，事件与行为

    ①图表容器

    这里和我们vue非常类似，就是我们定义一个图表实例后，应该将这个实例挂载到哪个dom元素节点上。这样才能在浏览器渲染出来。

    var myChart = echarts.init(document.getElementById('main'));

    ②样式

    样式是图表的重中之重，图表就是通过视觉表达数据的。所以这一块我们要好好了解一下

    ①颜色主题（Theme）

            最简单的更改全局样式的方式，是直接采用颜色主题（theme）

    ②调色盘

             具体见下图

    ③直接样式设置（itemStyle、lineStyle、areaStyle、label、...）

             这一部分是重点，我们直接通过api文档来了解一下这些配置，看看哪些地方用到了style相关的配置。

    ④视觉映射（visualMap）

             通过下方案例学习一下

            

     

     

    视觉映射代码：

    1. option = {
    2.   visualMap:{
    3.     // show:false,
    4.     min:0,
    5.     max:40,
    6.     inRange:{
    7.        color: ['red', 'blue', 'yellow'],
    8.     }
    9.   },
    10.   series: [
    11.     {
    12.       name: 'Nightingale Chart',
    13.       type: 'pie',
    14.       radius: [50, 250],
    15.       center: ['50%', '50%'],
    16.       roseType: 'area',
    17.       itemStyle: {
    18.         borderRadius: 8
    19.       },
    20.       data: [
    21.         { value: 40, name: 'rose 1' },
    22.         { value: 38, name: 'rose 2' },
    23.         { value: 32, name: 'rose 3' },
    24.         { value: 30, name: 'rose 4' },
    25.         { value: 28, name: 'rose 5' },
    26.         { value: 20, name: 'rose 6' },
    27.         { value: 10, name: 'rose 7' },
    28.         { value: 5, name: 'rose 8' }
    29.       ]
    30.     }
    31.   ]
    32. };

    ③数据集

    数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

    1. option = {
    2.   xAxis: {
    3.     type: 'category',
    4.     data: ['丰田', '本田', '特斯拉', '奇瑞']
    5.   },
    6.   yAxis: {},
    7.   series: [
    8.     {
    9.       type: 'bar',
    10.       name: '2015',
    11.       data: [89.3, 92.1, 94.4, 85.4]
    12.     }
    13.   ]
    14. };
    15.  
    16.  
    17.  
    18. //使用dateSet
    19.  
    20.  
    21. option = {
    22.   legend: {},
    23.   tooltip: {},
    24.   dataset: {
    25.     // 提供一份数据。
    26.     source: [
    27.       ['产品', '2015'],
    28.       ['丰田', 43.3],
    29.       ['本田', 83.1],
    30.       ['特斯拉', 86.4],
    31.       ['奇瑞', 72.4]
    32.     ]
    33.   },
    34.   // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    35.   xAxis: { type: 'category' },
    36.   // 声明一个 Y 轴，数值轴。
    37.   yAxis: {},
    38.   // 声明 bar 系列
    39.   series: [{ type: 'bar' }]
    40. };

    ④数据转换

    Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。

    1. var option = {
    2.   dataset: [
    3.     {
    4.       // 这个 dataset 的 index 是 `0`。
    5.       source: [
    6.         ['Product', 'Sales', 'Price', 'Year'],
    7.         ['Cake', 123, 32, 2011],
    8.         ['Cereal', 231, 14, 2011],
    9.         ['Tofu', 235, 5, 2011],
    10.         ['Dumpling', 341, 25, 2011],
    11.         ['Biscuit', 122, 29, 2011],
    12.         ['Cake', 143, 30, 2012],
    13.         ['Cereal', 201, 19, 2012],
    14.         ['Tofu', 255, 7, 2012],
    15.         ['Dumpling', 241, 27, 2012],
    16.         ['Biscuit', 102, 34, 2012],
    17.         ['Cake', 153, 28, 2013],
    18.         ['Cereal', 181, 21, 2013],
    19.         ['Tofu', 395, 4, 2013],
    20.         ['Dumpling', 281, 31, 2013],
    21.         ['Biscuit', 92, 39, 2013],
    22.         ['Cake', 223, 29, 2014],
    23.         ['Cereal', 211, 17, 2014],
    24.         ['Tofu', 345, 3, 2014],
    25.         ['Dumpling', 211, 35, 2014],
    26.         ['Biscuit', 72, 24, 2014]
    27.       ]
    28.       // id: 'a'
    29.     },
    30.     {
    31.       // 这个 dataset 的 index 是 `1`。
    32.       transform: {
    33.         type: 'filter',
    34.         config: { dimension: 'Year', value: 2011 }
    35.       }
    36.     },
    37.     {
    38.       // 这个 dataset 的 index 是 `2`。
    39.       transform: {
    40.         type: 'filter',
    41.         config: { dimension: 'Year', value: 2012 }
    42.       }
    43.     },
    44.     {
    45.       // 这个 dataset 的 index 是 `3`。
    46.       transform: {
    47.         type: 'filter',
    48.         config: { dimension: 'Year', value: 2013 }
    49.       }
    50.     }
    51.   ],
    52.   series: [
    53.     {
    54.       type: 'pie',
    55.       radius: 50,
    56.       center: ['25%', '50%'],
    57.       datasetIndex: 0
    58.     },
    59.      {
    60.       type: 'pie',
    61.       radius: 50,
    62.       center: ['37%', '20%'],
    63.       datasetIndex: 1
    64.     },
    65.     {
    66.       type: 'pie',
    67.       radius: 50,
    68.       center: ['50%', '50%'],
    69.       datasetIndex: 2
    70.     },
    71.     {
    72.       type: 'pie',
    73.       radius: 50,
    74.       center: ['75%', '50%'],
    75.       datasetIndex: 3
    76.     }
    77.   ]
    78. };

    ⑤坐标轴

    x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成

     

    ⑥图例

     

    1. option = {
    2.   legend: {
    3.     // Try 'horizontal'
    4.     orient: 'vertical',
    5.     right: 10,
    6.     top: 'center'
    7.   },
    8.   dataset: {
    9.     source: [
    10.       ['product', '2015', '2016', '2017'],
    11.       ['Matcha Latte', 43.3, 85.8, 93.7],
    12.       ['Milk Tea', 83.1, 73.4, 55.1],
    13.       ['Cheese Cocoa', 86.4, 65.2, 82.5],
    14.       ['Walnut Brownie', 72.4, 53.9, 39.1]
    15.     ]
    16.   },
    17.   xAxis: { type: 'category' },
    18.   yAxis: {},
    19.   series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    20. };

    ⑦事件与行为

    这一块也是比较重要的，但是对于有前端经验的小伙伴，事件这一块和js中的事件差不多，可以类比去理解就好了

    Documentation - Apache ECharts

    1. =====事件
    2. =================
    3.   
    4. // 指定图表的配置项和数据
    5. var option = {
    6.   xAxis: {
    7.     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    8.   },
    9.   yAxis: {},
    10.   series: [
    11.     {
    12.       name: '销量',
    13.       type: 'bar',
    14.       data: [5, 20, 36, 10, 10, 20]
    15.     }
    16.   ]
    17. };
    18. // 使用刚指定的配置项和数据显示图表。
    19. myChart.setOption(option);
    20. // 处理点击事件并且跳转到相应的百度搜索页面
    21. myChart.on('click', function(params) {
    22.   window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    23. });
    24.  
    25.  
    26. =================
    27. =====行为
    28. ==================
    29.  
    30. option = {
    31.   title: {
    32.     text: 'Referer of a Website',
    33.     subtext: 'Fake Data',
    34.     left: 'center'
    35.   },
    36.   tooltip: {
    37.     trigger: 'item'
    38.   },
    39.   legend: {
    40.     orient: 'vertical',
    41.     left: 'left'
    42.   },
    43.   series: [
    44.     {
    45.       name: 'Access From',
    46.       type: 'pie',
    47.       radius: '50%',
    48.       data: [
    49.         { value: 1048, name: 'Search Engine' },
    50.         { value: 735, name: 'Direct' },
    51.         { value: 580, name: 'Email' },
    52.         { value: 484, name: 'Union Ads' },
    53.         { value: 300, name: 'Video Ads' }
    54.       ],
    55.       emphasis: {
    56.         itemStyle: {
    57.           shadowBlur: 10,
    58.           shadowOffsetX: 0,
    59.           shadowColor: 'rgba(0, 0, 0, 0.5)'
    60.         }
    61.       }
    62.     }
    63.   ]
    64. };
    65. setTimeout(function() {
    66.   myChart.dispatchAction({
    67.     type: 'highlight',
    68.     // 可选，数据项名称，在有 dataIndex 的时候忽略
    69.     name: 'Direct',
    70. });
    71.   
    72. }, 50);

    实战开发

    今天带大家一起来模拟一下，我们真实开发的时候，怎么去完成我们的图表开发的

     

    社区资源库：

    EChartsDemo集

    EChartsDemo集

     

    1. let type = ['肥料', '农药'];
    2.  
    3. option = {
    4.     backgroundColor: '#081736',
    5.     title: {
    6.         show: true,
    7.         text: '',
    8.         textStyle: {
    9.             align: 'rigth',
    10.             color: '#115CB9',
    11.             fontSize: 20,
    12.         },
    13.         top: '3%',
    14.         left: '5%',
    15.     },
    16.     grid: {
    17.         top: "28%",
    18.         right: "10%",
    19.         bottom: "18%",//也可设置left和right设置距离来控制图表的大小
    20.     },
    21.     tooltip: {
    22.         // trigger: "axis",
    23.         // backgroundColor: 'rgba(17,95,182,0.5)',
    24.         // textStyle: {
    25.         //     color: "#fff"
    26.         // },
    27.         // // axisPointer: {
    28.         // //     type: "line",
    29.         // //     label: {
    30.         // //         show: false,
    31.         // //     }
    32.         // // },
    33.         // formatter: (pa) => {
    34.         //     let oneDotHtml = ''
    35.         //     let twoDotHtml = ''
    36.         //     // return pa[0].name + pa[0].value
    37.         //     return (
    38.         //         pa[0].name + '
      '
    39.         //         + oneDotHtml + pa[1].seriesName + '：' + pa[1].value + "
      "
    40.         //         + twoDotHtml + pa[0].seriesName + '：' + pa[0].value
    41.         //     );
    42.         // }
    43.     },
    44.     dataZoom: [{
    45.         show: false,
    46.         xAxisIndex: 0,
    47.         type: 'slider',
    48.         startValue: 0,
    49.         endValue: this.end
    50.     }],
    51.     legend: {
    52.         top: "20%",
    53.         left: '40%',
    54.         // icon: 'rect',
    55.         textStyle: {
    56.             padding: [0, 0, 0, 10],
    57.             color: "#aaaaaa",
    58.             fontSize: 14,
    59.             lineHeight: 16
    60.         },
    61.         itemGap: 50,
    62.         itemHeight: 10,
    63.         data: 
    64.         [{
    65.             name:"钢七连",
    66.            icon:'rect',
    67.              itemStyle:{
    68.                 // color:'#aaaaaa'
    69.             }
    70.  
    71.         },{
    72.             name:"老A",
    73.              icon:'circle',
    74.             itemStyle:{
    75.                 // color:'#aaaaaa'
    76.             }
    77.         }]
    78.     },
    79.     xAxis: {
    80.         data: [
    81.             "草堂镇",
    82.             "白帝镇",
    83.             "朱衣镇",
    84.             "康乐镇",
    85.             "永乐镇",
    86.             "安坪镇"
    87.         ],
    88.         axisLine: {
    89.             show: true, //隐藏X轴轴线
    90.            lineStyle: {
    91.                 color: '#132c5c'
    92.             }
    93.         },
    94.         axisTick: {
    95.             show: false //隐藏X轴刻度
    96.         },
    97.         axisLabel: {
    98.             show: true,
    99.             textStyle: {
    100.                 padding: [5, 0, 0, 0],
    101.                 color: "#fff" //X轴文字颜色
    102.             }
    103.         },
    104.     },
    105.     yAxis: [{
    106.         type: "value",
    107.         name: "(吨)",
    108.         nameTextStyle: {
    109.             color: "#aaaaaa",
    110.             fontSize: 14,
    111.              align:'right'
    112.         },
    113.         splitLine: {
    114.             show: true,
    115.             lineStyle: {
    116.                 color: '#132c5c'
    117.             }
    118.         },
    119.         axisTick: {
    120.             show: false
    121.         },
    122.         axisLine: {
    123.             show: true,
    124.             lineStyle: {
    125.                 color: '#132c5c'
    126.             }
    127.         },
    128.         axisLabel: {
    129.             show: true,
    130.             textStyle: {
    131.                 fontSize: 14,
    132.                 color: "#fff"
    133.             }
    134.         },
    135.     },
    136.     {
    137.         type: "value",
    138.         name: "(吨)",
    139.         nameTextStyle: {
    140.             color: "#aaaaaa",
    141.             fontSize: 14,
    142.              align:'left'
    143.         },
    144.         position: "right",
    145.         splitLine: {
    146.             show: false
    147.         },
    148.         axisTick: {
    149.             show: false
    150.         },
    151.         axisLine: {
    152.             show: true,
    153.             lineStyle: {
    154.                 color: '#132c5c'
    155.             }
    156.         },
    157.         axisLabel: {
    158.             show: true,
    159.             textStyle: {
    160.                 color: "#ffffff"
    161.             }
    162.         }
    163.     },
    164.         // {
    165.         //     type: "value",
    166.         //     // gridIndex: 1,
    167.         //     min: 50,
    168.         //     max: 100,
    169.         //     splitNumber: 8,
    170.         //     splitLine: {
    171.         //         show: false
    172.         //     },
    173.         //     axisLine: {
    174.         //         show: false
    175.         //     },
    176.         //     axisTick: {
    177.         //         show: false
    178.         //     },
    179.         //     axisLabel: {
    180.         //         show: false
    181.         //     },
    182.         //     splitArea: {
    183.         //         show: true,
    184.         //         areaStyle: {
    185.         //             color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
    186.         //         }
    187.         //     }
    188.         // }
    189.     ],
    190.     series: [{
    191.         name: "老A",
    192.         type: "line",
    193.         yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
    194.         smooth: false, //平滑曲线显示
    195.         // showAllSymbol: true, //显示所有图形。
    196.         symbol: "circle", //标记的图形为实心圆
    197.         symbolSize: 10, //标记的大小
    198.         itemStyle: {
    199.             //折线拐点标志的样式
    200.             color: "#1df5ed"
    201.         },
    202.         lineStyle: {
    203.             color: "#32749e"
    204.         },
    205.         areaStyle:{
    206.             // color: 'transparent'
    207.             //  color: ['#1df5ed','#ff0000']
    208.             // color: "#1df5ed"
    209.                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    210.                     offset: 0,
    211.                     color: "#1df5ed11"
    212.                     
    213.                 }, {
    214.                     offset: 1,
    215.                     color: "#1df5ed99"
    216.                 }
    217.                 ])
    218.         },
    219.         data: [1, 1.2, 3, 1, 1.5, 1]
    220.     },
    221.     {
    222.         name: "钢七连",
    223.         type: "bar",
    224.         barWidth: '30%',
    225.         showBackground: false,
    226.         itemStyle: {
    227.             borderColor:"#185294",
    228.             borderWidth:2,
    229.             color:'#0a2e73',
    230.              shadowColor: '#185294',
    231.     shadowBlur: 10,
    232.     // shadowOffsetY :3,
    233.     // shadowOffsetX:3
    234.             // normal: {
    235.             //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    236.             //         offset: 0,
    237.             //         color: "red"
    238.             //     }, {
    239.             //         offset: 0,
    240.             //         color: "#1F0D5E"
    241.             //     }, {
    242.             //         offset: 1,
    243.             //         color: "#1480C2"
    244.             //     }
    245.             //     ])
    246.             // }
    247.         },
    248.         label: {
    249.             normal: {
    250.                 show: false,
    251.                 textStyle: {
    252.                     color: '#FFF'
    253.                 },
    254.  
    255.             }
    256.         },
    257.         data: [14, 16, 20, 7, 15, 11]
    258.     }
    259.     ]
    260. };

  • 相关阅读:
    hands-on-data-analysis 第三单元 模型搭建和评估
    编译工具：CMake（七） | cmake 常用变量和常用环境变量
    github新手用法详解
    Hadoop3教程（十五）：MapReduce中的Combiner
    nginx 动静分离 防盗链
    Excel 数据透视表教程大全之 04 按日期分组（教程含样本数据）
    面试官问我TCP三次握手和四次挥手，我真的是
    12代CPU启用SR-IOV vGPU，实现一台电脑当七台用
    软件工程和计算机科学与技术学习方向区别
    [Spring] Spring5——事务简介
  • 原文地址：https://blog.csdn.net/qq_35577655/article/details/128063522