• ECharts的高级使用

    目录

    一 显示相关

    （1）主题的使用

    (2)调色盘和颜色渐变

     (3)样式

    （4）自适应

    二 动画的使用

    （1）加载动画

    （2）增量动画的实现方式

    （3）动画配置项

    三 交互API

    （1）全局echarts对象方法

     （2）echartsInstance对象方法

    一 显示相关

    （1）主题的使用

    1）内置主题
    ●ECharts中 默认内置了两套主题:ight dark
    ●在初始化对象方法init中可以指明
    var chart = echarts.init(dom, 'light');
    var chart = echarts.init(dom, 'dark');
    2）自定义主题
    ●1.在主题编辑器中编辑主题
    ●2.下载主题, 是一个js文件
    ●3.引入主题js文件
    ●4.在init方法中使用主题

    1.  <script src="theme/itcast.js"></script>
    2.  
    3. <body>
    4.   <div style="width: 600px;height:400px"></div>
    5.   <script>
    6.      var mCharts = echarts.init(document.querySelector("div"), 'itcast')  
    7. </script>
    8. </body>

    (2)调色盘和颜色渐变

    调色盘（使用遵循就近原则）：

    1.  //1.主题调色盘
    2.     var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    3.     var pieData = [
    4.       {
    5.         value: 11231,
    6.         name: "淘宝",
    7.       },
    8.       {
    9.         value: 22673,
    10.         name: "京东"
    11.       },
    12.       {
    13.         value: 6123,
    14.         name: "唯品会"
    15.       },
    16.       {
    17.         value: 8989,
    18.         name: "1号店"
    19.       },
    20.       {
    21.         value: 6700,
    22.         name: "聚美优品"
    23.       }
    24.     ]
    25.     var option = {
    26.       //2.全局调色盘
    27.       color: ['red', 'green', 'blue', 'skyblue', 'purple'],
    28.       series: [
    29.         {
    30.           type: 'pie',
    31.           data: pieData,
    32.           // 3 局部调色盘
    33.           color: ['pink', 'yellow', 'black', 'orange', 'red']
    34.         }
    35.       ]
    36.     };
    37.     mCharts.setOption(option)

    颜色渐变

    1.     series: [
    2.         {
    3.           
    4.           itemStyle: {
    5.             /*
    6.           //线性渐变（从上倒下）
    7.             color: {
    8.               type: 'linear', // 线性渐变
    9.               x: 0,
    10.               y: 0,
    11.               x2: 0,
    12.               y2: 1,
    13.               colorStops:[
    14.                 {
    15.                   offset: 0, color: 'red' // 0%处的颜色为红色
    16.                 },
    17.                 {
    18.                   offset: 1, color: 'blue' // 100%处的颜色为蓝
    19.                 }
    20.               ]
    21.            }*/
    22.             color: {
    23.               type: 'radial', // 径向渐变
    24.               x: 0.5,
    25.               y: 0.5,
    26.               r: 0.5,
    27.               colorStops: [
    28.                 {
    29.                   offset: 0, color: 'red' // 0%处的颜色为红色
    30.                 },
    31.                 {
    32.                   offset: 1, color: 'blue' // 100%处的颜色为蓝
    33.                 }
    34.               ]
    35.             }
    36.           }
    37.         }
    38.       ]

    线性渐变效果：

     

    径向渐变效果： 

     (3)样式

    1）直接样式
    itemStyle、textStyle、lineStyle、areaStyle、label
    这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式

    1. data: [
    2. {
    3. value: 11231,
    4. name: "淘宝",
    5. itemStyle: {
    6. color: 'black' // 控制淘宝这一区域的样式
    7. }
    8. }
    9. ]
    10. title: {
    11. text: '我是标题',
    12. textStyle: {
    13. color: 'red'
    14. }
    15. }
    16. label: {
    17. color: 'green'// 控制淘宝这一文字的样式
    18. }

    2）高亮样式
    图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成
    的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式在emphasis 中包裹原先的itemStyle 等等

    1.  series: [
    2.         {
    3.           type: 'pie',
    4.  
    5.           data: [{
    6.             value: 11231,
    7.             name: "淘宝",
    8.             itemStyle: {
    9.               color: 'yellow'
    10.             },
    11.             label: {
    12.               color: 'green'
    13.             },
    14.             emphasis: {
    15.               itemStyle: { // 点击时控制淘宝这一区域的样式
    16.                 color: 'pink'
    17.               },
    18.               label: {
    19.                 color: 'black'// 点击时控制淘宝这一文字的样式
    20.               }
    21.             }
    22.           }]
    23. }]

    优先级高,会覆盖主题中、调色盘的效果


    （4）自适应

    当浏览器的大小发生变化的时候,如果想让图表也能随之适配变化
     ●1. 监听窗口大小变化事件
      ●2.在事件处理函数中调用ECharts实例对象的resize即可
    window.onresize = function(){
    myChart.resize();
    }

    1.  mCharts.setOption(option)
    2.     // 监听window窗口大小变化的事件
    3.     window.onresize = function(){
    4.       // console.log('window.onresize...')
    5.       // 调用echarts实例对象的resize方法
    6.       mCharts.resize()
    7.     }
    8.     // window.onresize = mCharts.resize

    二 动画的使用

    （1）加载动画


    ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可
    ●显示加载动画
    mCharts.showLoading()
    ●隐藏加载动画
    mCharts.hideLoading()

    （2）增量动画的实现方式

    所有数据的更新都限过setoption头现
    不用考虑数据到底产生了那些变化
    ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Document</title>
    9.   <script src="lib/echarts.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div style="width: 600px;height:400px"></div>
    14.   <button id="modify">修改数据</button>
    15.   <button id="add">增加数据</button>
    16.   <script>
    17.     var mCharts = echarts.init(document.querySelector("div"))
    18.     var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    19.     var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    20.     var option = {
    21.       xAxis: {
    22.         type: 'category',
    23.         data: xDataArr
    24.       },
    25.       yAxis: {
    26.         type: 'value'
    27.       },
    28.       series: [
    29.         {
    30.           type: 'bar',
    31.           data: yDataArr,
    32.           markPoint: {
    33.             data: [
    34.               {
    35.                 type: 'max', name: '最大值'
    36.               },
    37.               {
    38.                 type: 'min', name: '最小值'
    39.               }
    40.             ]
    41.           },
    42.           markLine: {
    43.             data: [
    44.               {
    45.                 type: 'average', name: '平均值'
    46.               }
    47.             ]
    48.           },
    49.           label: {
    50.             show: true,
    51.             rotate: 60
    52.           },
    53.           barWidth: '30%'
    54.         }
    55.       ]
    56.     }
    57.     mCharts.setOption(option)
    58.  
    59.     var btnModify = document.querySelector('#modify')
    60.     btnModify.onclick = function () {
    61.       var newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]
    62.       // setOption 可以设置多次
    63.       // 新的option 和 旧的option
    64.       // 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
    65.       // 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
    66.       var option = {
    67.         series: [
    68.           {
    69.             data: newYDataArr
    70.           }
    71.         ]
    72.       }
    73.       mCharts.setOption(option)
    74.     }
    75.     var btnAdd = document.querySelector('#add')
    76.     btnAdd.onclick = function(){
    77.       xDataArr.push('小红')
    78.       yDataArr.push(90)
    79.       var option = {
    80.         xAxis: {
    81.           data: xDataArr
    82.         },
    83.         series: [
    84.           {
    85.             data: yDataArr
    86.           }
    87.         ]
    88.       }
    89.       mCharts.setOption(option)
    90.     }
    91.   </script>
    92. </body>
    93.  
    94. </html>

    （3）动画配置项

    动画配置项
    ●开启动画
    animation: true
    ●动画时长
    animationDuration: 5000（可设置回调函数）
    ●缓动动画
    animationEasing: 'bounceOut'（缓动动画）
    ●动画阈值
    animationThreshold: 8
    单种形式的元素数量大于这个阈值时会关闭动画

    三 交互API

    全局echarts对象是引入echarts.js文件之后就可以直接使用的
     echartsInstance对象是通过echarts.init方法调用之后得到的

    （1）全局echarts对象方法

           1)init

           初始化ECharts实例对象
           使用主题（light或dark）

          2)registerTheme

              注册主题.
             只有注册过的主题,才能在init方法中使用该主题
          3)registerMap

              ●注册地图数据
               $.get(json/ map/china.json', function (china]son) {
                          echarts.registerMap('china', chinaJson);
                        });
               ●geo组件使用地图数据
               var option= {
                       geo: {
                        type: 'map',
                         map: 'china',
                         },
                      });


           4)connect 

          ●一个页面中可以有多个独立的图表
          ●每一个图表对应一个ECharts实例对象
          ●connect 可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
                保存图片的自动拼接
                 刷新按钮
                 重置按钮
                 提示框联动、图例选择、数据范围修改等.....

     （2）echartsInstance对象方法

    ■setOption

      ●设置或修改图表实例的配置项以及数据
      ●多次调用setOption方法
      合并新的配置和旧的配置
       ---增量动画实现机制

    ■resize

      ●重新计算和绘制图表
       ●一般和window对象的resize事件结合使用
        window.onresize = function(){
             myChart.resize();
             }

    ■on\off

           ●绑定或者解绑事件处理函数
           ●鼠标事件
                常见事件: 'click'. 'dblclick'. 'mousedown'. 'mousemove'. 'mouseup' 等
                 事件参数arg:和事件相关的数据信息
            ●ECharts事件
              常见事件:legendselectchanged. 'datazoom'. 'pieselectchanged'. 'mapselectchanged' 等
              事件参数arg：和事件相关的数据信息

    ■dispatchAction

       ●触发某些行为
       ●使用代码模拟用户 的行为
          mCharts.dispatchAction({
                type: 'highlight', //事件类型
                 seriesIndex: 0,//图表索引
                dataIndex: 1//图表中哪一项高亮
           });
    ■clear

       ●清空当前实例， 会移除实例中所有的组件和图表
       ●清空之后可以再次setOption
    ■dispose

       ●销毁实例
       ●销毁后实例无法再被使用

  • 相关阅读:
    在线Web页面测试工具-WebPageTest
    【LeetCode】895.最大频率栈
    天翼云探索云原生、边缘计算融合新思路
    前后端都用得上的 Nginx 日常使用经验
    数据结构-二叉树
    顺序表和链表
    【无标题】
    03 树莓派QEMU模拟器介绍
    系统架构设计：15 论软件架构的生命周期
    土巴兔上市再折戟，互联网家装没故事
  • 原文地址：https://blog.csdn.net/qq_62401904/article/details/126571074