• Echarts基础

    目录

    一 基本的柱状图

     二 通用配置

    （1）title

     （2）tooltip

     （3）toolbox

    （4）legend

    三 折线图

    四 散点图

    五 直角坐标系的常用配置

    六 饼图

    七 地图

    八 雷达图

    十  仪表盘的实现

    一 基本的柱状图

    （1）步骤

    ●基本的代码结构
    ●x轴和y轴的数据
    ●series中 的type设置为bar
    （2）柱状图常见效果
    ●最大值\最小值markPoint
    ●平均值markLine
    ●数值的显示label
    ●柱的宽度barWidth
    柱状图特点
    ●柱状图描述的是分类数据，呈现的是每一个分类中有多少,通过柱状图,可以很清晰的看出每个分类数据的排名情况

    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.   <script>
    15.     //1. ECharts最基本的代码结构
    16.     //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    17.     //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    18.     //4. 将type的值设置为bar
    19.     var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    20.     var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    21.     var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    22.     var option = {
    23.       xAxis: {
    24.         type: 'value'
    25.       },
    26.       yAxis: {
    27.         type: 'category',
    28.         data: xDataArr
    29.       },
    30.       series: [
    31.         {
    32.           name: '语文',
    33.           type: 'bar',
    34.           markPoint: { // 标记点，标记最大值与最小值
    35.             data: [
    36.               {
    37.                 type: 'max', name: '最大值'
    38.               },{
    39.                 type: 'min', name: '最小值'
    40.               }
    41.             ]
    42.           },
    43.           markLine: { // 标记线
    44.             data: [
    45.               {
    46.                 type: 'average', name: '平均值'
    47.               }
    48.             ]
    49.           },
    50.           label: { // 柱状图上的文字设置
    51.             show: true, // 是否显示
    52.             rotate: 60, // 旋转角度
    53.             position: 'top' // 显示位置
    54.           },
    55.           barWidth: '30%', // 柱的宽度
    56.           data: yDataArr
    57.         }
    58.       ]
    59.     }
    60.     mCharts.setOption(option)
    61.   </script>
    62. </body>
    63.  
    64. </html>

     二 通用配置

    （1）title

    1.    title: { // 标题设置
    2.         text: '成绩展示', // 标题文字
    3.         textStyle: { // 标题文字样式设置
    4.           color: 'red'
    5.         },
    6.         borderWidth: 5, // 标题边框宽度
    7.         borderColor: 'blue', // 标题边框颜色
    8.         borderRadius: 5, // 标题边框圆角
    9.         left: 50, // 标题距离左边的距离
    10.         top: 10 // 标题距离顶部的距离
    11.       },

     （2）tooltip

    1.  tooltip: { // 工具提示
    2.         // trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
    3.         trigger: 'axis',
    4.         triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
    5.         // formatter: '{b} 的成绩是 {c}'
    6.         formatter: function(arg){ // 文字格式化
    7.           return arg[0].name + '的分数是:' + arg[0].data
    8.         }
    9.       },

     （3）toolbox

    1.     toolbox: { // 工具箱按钮
    2.         feature: {
    3.           saveAsImage: {}, // 导出图片
    4.           dataView: {}, // 数据视图
    5.           restore: {}, // 重置
    6.           dataZoom: {}, // 区域缩放
    7.           magicType: {
    8.             type: ['bar', 'line']
    9.           } // 动态图表类型的切换
    10.         }
    11.       },

    （4）legend

    legend:图例,用于筛选系列,需要和series配合使用
    ●legend中 的data是一个数组
    ●legend中 的data的值需要和series数组中某组数据的name值-致
     

    三 折线图

    （1）常见效果
    ●标记:最大值最小值平均值标注区间
    markPoint、markLine、 markArea

    ●线条控制: 平滑风格
    smooth、lineStyle
    ●填充风格
    areaStyle

    1.  series: [
    2.         {
    3.           name: '康师傅',
    4.           data: yDataArr,
    5.           type: 'line',
    6.           markPoint: { // 标记点
    7.             data: [
    8.               {
    9.                 type: 'max'
    10.               },
    11.               {
    12.                 type: 'min'
    13.               }
    14.             ]
    15.           },
    16.           markLine: { // 标记线
    17.             data: [
    18.               {
    19.                 type: 'average'
    20.               }
    21.             ]
    22.           },
    23.           markArea: { // 标记区域
    24.             data: [
    25.               [
    26.                 {
    27.                   xAxis: '1月'
    28.                 },
    29.                 {
    30.                   xAxis: '2月'
    31.                 }
    32.               ],
    33.               [
    34.                 {
    35.                   xAxis: '7月'
    36.                 },
    37.                 {
    38.                   xAxis: '8月'
    39.                 }
    40.               ]
    41.             ]
    42.           },
    43.           smooth: true, // 是否为平滑线
    44.           lineStyle: { // 线的样式设置
    45.             color: 'green',
    46.             type: 'solid' // dashed 虚线 dotted 点线 solid 实线
    47.           },
    48.           areaStyle: { // 线和x轴形成的区域设置
    49.             color: 'pink'
    50.           }
    51.         }
    52.       ]

    ●紧挨边缘
    boundaryGap，值为false:没有间隔，true为默认值，有间隔
    ●缩放:脱离0值比例
    scale，为true时支持缩放，用于数据相差不大时
    ● 堆叠图.
    stack 

    （2）总结

     基本的折线图：
                 ●基本的代码结构
                 ●x轴和y轴的数据
                 ●series中 的type设置为line

     折线图特点：折线图常用来分析数据随时间的变化趋势
     

    四 散点图

    （1）实现步骤

    ●ECharts最基本的代码结构:
    引入js文件, DOM容器,初始化对象,设置option
    ●x轴数据和y轴的数据: 二维数组
    数组1:[   [身高1,体重1]， [身高2, 体重2]，[身高3,体重3]......]
    ●图表类型下：
              在series下设置type:scatter
              xAxis和yAxis的type都要设置为value

    ●调整:
        将坐标轴都设置为脱离0值比例,scale：true

    1.  <div style="width: 600px;height:400px"></div>
    2.   <script>
    3. var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }]//此处省略n个数据
    4.   var axisData = []
    5.     for( var i=0;i<data.length;i++) {
    6.       var height = data[i].height
    7.       var weight = data[i].weight
    8.       var newArr = [height, weight]
    9.       axisData.push(newArr)
    10.     }
    11.     var mCharts = echarts.init(document.querySelector("div"))
    12.     var option = {
    13.       xAxis: {
    14.         type: 'value',
    15.         scale: true//摆脱0值比例
    16.       },
    17.       yAxis: {
    18.         type: 'value',
    19.         scale: true
    20.       },
    21.       series: [
    22.         {
    23.           type: 'scatter', // 指明图表的类型为散点图
    24.           data: axisData
    25.         }
    26.       ]
    27.     }
    28.     mCharts.setOption(option)
    29.   </script>

    （2）散点图的常见效果（均在series下完成）
    ●气泡图效果
       散点的大小不同： symbolSize，可指明函数，通过return的值控制大小
       散点的颜色不同：itemStyle

    1.   symbolSize: function (arg) { // 控制散点的大小
    2.             // console.log(arg)
    3.             var height = arg[0] / 100
    4.             var weight = arg[1]
    5.             // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
    6.             var bmi = weight / (height * height)
    7.             if (bmi > 28) {
    8.               return 20
    9.             }
    10.             return 5
    11.           },
    12.           itemStyle: { // 控制散点的样式
    13.             color: function (arg) {
    14.               // console.log(arg)
    15.               var height = arg.data[0] / 100
    16.               var weight = arg.data[1]
    17.               // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
    18.               var bmi = weight / (height * height)
    19.               if (bmi > 28) {
    20.                 return 'red'
    21.               }
    22.               return 'green'
    23.             }


    ●涟漪动画效果
           type:effectScatter（指明图表为带涟漪动画的散点图），它代替type:scatter
           showEffectOn（出现涟漪动画的时机）有两个值 分别是render(每个散点渲染完成自动有涟漪动画的效果) 、emphasis(当散点被鼠标移入划过的时候才会出现涟漪效果)）
            rippleEffect:{scale: 10 }（ 涟漪动画时, 散点的缩放比例）

    散点图特点：散点图可以帮助我们推断出不同维度数据之间的相关性

    五 直角坐标系的常用配置

    直角坐标系图表:柱状图、折线图、散点图
    ●配置1:网格grid
    ●配置2: 坐标轴axis 
    ●配置3:区域缩放dataZoom

    (1)grid

      grid是用来控制直角坐标系的布局和大小,x轴和y轴就是在grid的基础上进行绘制的
    ●显示grid
           show
    ●grid的边框
       borderWidth、borderColor
    ●grid的位 置和大小
        left、top、right、bottom
        width、height

    1.   grid: { // 坐标轴容器
    2.         show: true, // 是否可见
    3.         borderWidth: 10, // 边框的宽度
    4.         borderColor: 'pink', // 边框的颜色
    5.         left: 100, // 边框(图表)的位置
    6.         top: 100,
    7.         width: 400, // 边框（图表）的大小
    8.         height: 100
    9.       }

    (2)axis

    坐标轴分为x轴和y轴, 一个grid 中最多有两种位置的x 轴和y 轴
    坐标轴类型 type
    value : 数值轴, 自动会从目标数据中读取数据
    category : 类目轴, 该类型必须通过data 设置类目数据
    坐标轴位置
    xAxis : 可取值为 top 或者bottom
    yAxis : 可取值为left 或者right

    1.  xAxis: {
    2.         type: 'category',
    3.         data: xDataArr,
    4.         position: 'top'
    5.     },
    6.     yAxis: {
    7.         type: 'value',
    8.         position: 'right'
    9.     }
    10.

    (3)dataZoom

    dataZoom用于区域缩放,对数据范围过滤,x轴和y轴都可以拥有
    dataZoom是一-个数组,意味着可以配置多个区域缩放器
    ●类型type
    slider:滑块
    inside:内置,依靠鼠标滚轮或者双指缩放
    ●指明产生作用的轴
    xAxisIndex:设置缩放组件控制的是哪个x轴, - 般写0即可
    yAxisIndex:设置缩放组件控制的是哪个y轴, -般写0即可
    ●指明初始状态的缩放情况
    start:数据窗口范围的起始百分比
    end:数据窗口范围的结束百分比

    1. var option = {
    2.     xAxis: {
    3.         type: 'category',
    4.         data: xDataArr
    5.     },
    6.     yAxis: {
    7.         type: 'value'
    8.     },
    9.     dataZoom: [
    10.         {
    11.             type: 'slider',
    12.             xAxisIndex: 0
    13.         },
    14.         {
    15.             type: 'slider',
    16.             yAxisIndex: 0,
    17.             start: 0,
    18.             end: 80
    19.         }
    20.     ]
    21. }

    针对于非直角坐标系图表,比如饼图地图等,以上三个配置(grid、axis、dataZoom)可能就不会生效
     

    六 饼图

    （1）基本实现

    实现步骤
    ●ECharts最基本的代码结构:
    引入js文件, DOM容器,初始化对象,设置option
    ●数据准备: (name: "淘宝", value:112121 },
    { name: "京东", value: 22673 },
    { name: "唯品会", value: 6123 },
    { name: "1号店", value: 8989 },
    { name: "聚美优品",value: 6700 }
    ●图表类型:
    在series下设置type:pie

    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.   <script>
    15.     //1. ECharts最基本的代码结构
    16.     //2. 准备数据[{name:???, value:??? },{}]
    17.     //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    18.     //3. 将type的值设置为pie
    19.     var mCharts = echarts.init(document.querySelector("div"))
    20.     // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    21.     var pieData = [
    22.       {
    23.         name: '淘宝',
    24.         value: 11231
    25.       },
    26.       {
    27.         name: '京东',
    28.         value: 22673
    29.       },
    30.       {
    31.         name: '唯品会',
    32.         value: 6123
    33.       },
    34.       {
    35.         name: '1号店',
    36.         value: 8989
    37.       },
    38.       {
    39.         name: '聚美优品',
    40.         value: 6700
    41.       }
    42.     ]
    43.     var option = {
    44.       series: [
    45.         {
    46.           type: 'pie',
    47.           data: pieData
    48.         }
    49.       ]
    50.     }
    51.     mCharts.setOption(option)
    52.   </script>
    53. </body>
    54.  
    55. </html>

    注意:
    饼图的数据是由name和value组成的字典所形成的数组

    series中的type设置为pie
    饼图无须配置xAxis和yAxis
    （2）饼图的常见效果

    ●显示数值
    label.formatter
    ●圆环
    设置两个半径radius: ['50%', '70%']
    ●南丁格尔图
    roseType:'radius'
    ●选中效果
    选中模式selectedMode: single\multiple
    选中偏移量selectedOffset:30

    1.   var option = {
    2.       series: [
    3.         {
    4.           .....
    5.           label: { // 饼图文字的显示
    6.             show: true, // 显示文字
    7.             //formatter: 'hehe' // 决定文字显示的内容
    8.             formatter: function(arg){
    9.               // console.log(arg)
    10.               return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
    11.             }
    12.           },
    13.           // radius: 20 // 饼图的半径
    14.           // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
    15.           // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
    16.          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的,自身数值越大的半径越大
    17.           // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
    18.           selectedMode: 'multiple',//多个选中
    19.           selectedOffset: 30//偏离的距离
    20.         }
    21.       ]
    22.     }

    饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

    七 地图

    地图图表的使用方式.
    ●百度地图API
    需要申请百度地图ak
    ●矢量地图
    需要准备矢量地图数据

    （1）矢量地图的实现步骤
    ●ECharts最 基本的代码结构:
    引入js文件, DOM容器,初始化对象,设置option
    ●准备中国的矢量地图json文件,放到json/map/的目录下
         china.json
    ●使用Ajax获取china.json
    $.get('json/ map/china.json', function (chinajson) { })
    ●在回调函数中往echarts全局对象注册地图的json数据
    echarts.registerMap('chinaMap', chinaJson);
    ●在geo下设置
    type:'map'
    map:'chinaMap'
    （2）常用配置

    缩放拖动:
    roam
    名称显示
    label
    初始缩放比例
    zoom
    地图中心点
    center

    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.   <script src="lib/jquery.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <div style="width: 600px;height:400px;border: 1px solid #f00"></div>
    15.  
    16.   <script>
    17.     //1. ECharts最基本的代码结构
    18.     //2. 准备中国地图的矢量数据
    19.     //3. 使用Ajax获取矢量地图数据
    20.     //4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
    21.     //5. 配置geo的type为'map', map为'chinaMap' 
    22.     var mCharts = echarts.init(document.querySelector("div"))
    23.     $.get('json/map/china.json', function (ret) {
    24.       // ret 就是中国的各个省份的矢量地图数据
    25.       // console.log(ret)
    26.       echarts.registerMap('chinaMap', ret)
    27.       var option = {
    28.         geo: {
    29.           type: 'map',
    30.           map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
    31.           roam: true, // 设置允许缩放以及拖动的效果
    32.           label: {
    33.             show: true // 展示标签
    34.           },
    35.           zoom: 1, // 设置初始化的缩放比例，默认值为1
    36.           center: [87.617733, 43.792818]
    37.        //  设置地图中心点的坐标
    38.         }
    39.       }
    40.       mCharts.setOption(option)
    41.     })
    42.  
    43.   </script>
    44. </body>
    45.  
    46. </html>

    （2）显示某个省份的地图

    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.   <script src="lib/jquery.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <div style="width: 600px;height:400px;border: 1px solid #f00"></div>
    15.  
    16.   <script>
    17.     //1. 加载安徽省地图的矢量数据
    18.     //2. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('anhui', 矢量地图数据)
    19.     //3. 配置geo的type为'map', map为'anhui' 
    20.     //4. 通过zoom调整缩放比例
    21.     //5. 通过center调整中心点 
    22.     var mCharts = echarts.init(document.querySelector("div"))
    23.     $.get('json/map/anhui.json', function (ret) {
    24.       console.log(ret)//ret就是安徽省各个市的数据
    25.       echarts.registerMap('anhui', ret)
    26.       var option = {
    27.         geo: {
    28.           type: 'map',
    29.           map: 'anhui',
    30.           zoom: 1.2,
    31.           label: {
    32.             show: true
    33.           },
    34.           center: [116.507676, 31.752889]
    35.    //坐标可以通过打印ret,拿到features下某个对象的properties的cp得到
    36.         }
    37.       }
    38.       mCharts.setOption(option)
    39.     })
    40.  
    41.   </script>
    42. </body>
    43.  
    44. </html>

     (3)显示空气质量

    不同城市颜色不同
        1.显示基本的中国地图
        2.城市的空气质量数据设置给series
        3.将series下的数据和geo关联起来：geolndex:0、type: 'map'
       4.结合visualMap配合使用
             min
            max .
            inRange

    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.   <script src="lib/jquery.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <div style="width: 600px;height:400px;border: 1px solid #f00"></div>
    15.  
    16.   <script>
    17.     //1. 显示基本的中国地图
    18.     //2. 将空气质量的数据设置给series下的对象
    19.     //3. 将series下的数据和geo关联起来
    20.     //4. 配置visualMap
    21.     var airData = [
    22.         { name: '北京', value: 39.92 },
    23.         { name: '天津', value: 39.13 },
    24.         { name: '上海', value: 31.22 },
    25.         { name: '重庆', value: 66 },
    26.         { name: '河北', value: 147 },
    27.         { name: '河南', value: 113 },
    28.         { name: '云南', value: 25.04 },
    29.         { name: '辽宁', value: 50 },
    30.         { name: '黑龙江', value: 114 },
    31.         { name: '湖南', value: 175 },
    32.         { name: '安徽', value: 117 },
    33.         { name: '山东', value: 92 },
    34.         { name: '新疆', value: 84 },
    35.         { name: '江苏', value: 67 },
    36.         { name: '浙江', value: 84 },
    37.         { name: '江西', value: 96 },
    38.         { name: '湖北', value: 273 },
    39.         { name: '广西', value: 59 },
    40.         { name: '甘肃', value: 99 },
    41.         { name: '山西', value: 39 },
    42.         { name: '内蒙古', value: 58 },
    43.         { name: '陕西', value: 61 },
    44.         { name: '吉林', value: 51 },
    45.         { name: '福建', value: 29 },
    46.         { name: '贵州', value: 71 },
    47.         { name: '广东', value: 38 },
    48.         { name: '青海', value: 57 },
    49.         { name: '西藏', value: 24 },
    50.         { name: '四川', value: 58 },
    51.         { name: '宁夏', value: 52 },
    52.         { name: '海南', value: 54 },
    53.         { name: '台湾', value: 88 },
    54.         { name: '香港', value: 66 },
    55.         { name: '澳门', value: 77 },
    56.         { name: '南海诸岛', value: 55 }
    57.     ]
    58.     var mCharts = echarts.init(document.querySelector("div"))
    59.     $.get('json/map/china.json', function (ret) {
    60.       // ret 就是中国的各个省份的矢量地图数据
    61.       console.log(ret)
    62.       echarts.registerMap('chinaMap', ret)
    63.       var option = {
    64.         geo: {
    65.           type: 'map',
    66.           map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
    67.           roam: true, // 设置允许缩放以及拖动的效果
    68.           label: {
    69.             show: true // 展示标签
    70.           }
    71.         },
    72.         series: [
    73.           {
    74.             data: airData,
    75.             geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
    76.             type: 'map'
    77.           }
    78.         ],
    79.         visualMap: {
    80.           min: 0,
    81.           max: 300,
    82.           inRange: {
    83.             color: ['white', 'red'] // 控制颜色渐变的范围
    84.           },
    85.           calculable: true // 出现滑块
    86.         }
    87.       }
    88.       mCharts.setOption(option)
    89.     })
    90.  
    91.   </script>
    92. </body>
    93.  
    94. </html>

     （5）地图与散点图结合

    1.给series下增加新的对象
    2.准备好散点数据,设置给新对象的data

    1.  var scatterData = [
    2.       {
    3.         value: [117.283042, 31.86119]// 散点的坐标, 使用的是经纬度
    4.  
    5.       }
    6.     ]


    3.配置新对象的type
    type:effectScatter
    4.让散点图使用地图坐标系统
    coordinateSystem: 'geo',
    5.让涟漪的效果更加明显
    rippleEffect: {
    scale: 10
    }

    1.  
    2. var option = {
    3.     series: [
    4.         {
    5.             data: airData,
    6.             geoIndex: 0,
    7.             type: 'map'
    8.         }, {
    9.             data: scatterData,// 配置散点的坐标数据
    10.             type: 'effectScatter',
    11.             coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
    12.             rippleEffect: {
    13.                 scale: 10 // 设置涟漪动画的缩放比例
    14.             }
    15.         }
    16.     ]
    17. }

    地图特点： 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

    八 雷达图

    (1)实现步骤：

    ●ECharts最 基本的代码结构:
    引入js文件, DOM容器,初始化对象,设置option
    ●定义各个维度的最大值

    1. var datamax = [
    2. {
    3. name:'易用性’， max: 100
    4. {
    5. name:'功能 '，max: 100
    6. }，
    7. {
    8. name:'拍照’， max: 100
    9. }，
    10. {
    11. name:'跑分' ，max: 100
    12. name:'续航' ，max: 100
    13. }
    14. ]

    .
    ●准备具体产品的数据:

    1. var hwscore =[80,90，80，82,90]
    2. var zxscore = [70,82，75，70，78]


    ●图表类型:
    在series下设置type:radar

    1. var option = {
    2. radar: {
    3. indicator: datamax
    4. }，
    5. series: [
    6. {
    7. type:'radar' ，
    8. data:[
    9. {
    10. name: '华为手机1'，
    11. value: hwscore
    12. }，
    13. {
    14. name:'中兴手机1'，
    15. value: zxScore
    16. }
    17. ]
    18. }
    19. ]
    20. }

    (2)常用配置

    ●显示数值:
    label
    ●区域面积
    areaStyle

    1.  series: [
    2.         {
    3.        label: { // 设置标签的样式
    4.             show: true // 显示数值
    5.           },
    6.           areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
    7. }]


    ●绘制类型
    shape

    1.  radar: { 
    2.         indicator: dataMax, // 配置各个维度的最大值
    3.         shape: 'polygon' // 配置雷达图最外层的图形 circle圆形 polygon多边形
    4.       },

    雷达图特点：可以用来分析多个维度的数据与标准数据的对比情况

    十  仪表盘的实现

    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.  
    15.   <script>
    16.     //1. ECharts最基本的代码结构
    17.     //2. 准备数据, 设置给series下的data
    18.     //3. 将type的值设置为gauge
    19.     var mCharts = echarts.init(document.querySelector("div"))
    20.     var option = {
    21.       series: [
    22.         {
    23.           type: 'gauge',
    24.           data: [
    25.             {
    26.               value: 97,
    27.               itemStyle: { // 指针的样式
    28.                 color: 'pink' // 指针的颜色
    29.               }
    30.             }, // 每一个对象就代表一个指针
    31.             {
    32.               value: 85,
    33.               itemStyle: {
    34.                 color: 'green'
    35.               }
    36.             }
    37.           ],
    38.           min: 50 // min max 控制仪表盘数值范围
    39.         }
    40.       ]
    41.     }
    42.     mCharts.setOption(option)
    43.   </script>
    44. </body>
    45.  
    46. </html>

    仪表盘的特点：仪表盘可以更直观的表现出某个指标的进度或实际情况
     

  • 相关阅读:
    智慧工地安全管理大屏UX/UI设计的触控感——从交互体验角度的产品思考
    mvnd 安装和配置
    MySQL数据库————视图和索引
    迁移学习的概念
    NPDP认证|传统行业产品经理如何把控产品方向？
    Echarts地图实现：2013-2019电商动态排名
    【信号去噪】基于鲸鱼算法优化VMD实现信号去噪附matlab代码
    MediaPipe+OpenCV 实现实时手势识别（附Python源码）
    PHP数组输出为xml的两种常见方法
    nodejs微信小程序 ＋python＋PHP+图书销售管理系统的设计与实现-网上书店-图书商城-计算机毕业设计
  • 原文地址：https://blog.csdn.net/qq_62401904/article/details/126033447