首页 前端知识 echarts易混总结

echarts易混总结

2024-06-22 10:06:21 前端知识 前端哥 843 301 我要收藏

echarts 配置项里 normal 属性的含义是什么?

如题,官方文档并没有对 normal 做出解释,但网络上的诸多例子中它却频频出现,本人在测试中恰好遇到了它。
有人回答说:“normal 是图形在默认状态下的样式,加上这个属性和不加这个属性样式都是一样的”,但是他们只验证了 label.normal 无需设置。而我在测试折线图线条渐变时,不设置 normal 是达不到效果的。
参考配置:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        itemStyle: {
            // 必须在 normal 里设置
            normal: {
                lineStyle:{
                    color:{
                      colorStops: [{
                          offset: 0, color: 'red' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'blue' // 100% 处的颜色
                      }],
                    }
                },
            },
            // 直接设置会失效
            // lineStyle:{
            //     color:{
            //       colorStops: [{
            //           offset: 0, color: 'red' // 0% 处的颜色
            //       }, {
            //           offset: 1, color: 'blue' // 100% 处的颜色
            //       }],
            //     }
            // },
        },
    }]
};

这个配置确实被废弃了,可以生效是为了向下兼容:
在这里插入图片描述

写的时候最好看你使用的版本,然后按照文档来写,按照新版的,直接在itemStyle或lineStyle中设置color就可以了:

在这里插入图片描述

维度名 纬度名的书写位置

维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。

  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
例子中,'score''amount''product' 就是维度名。从第二行开始,才是正式的数据。dataset.source 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行(列)就是维度,或者 dataset.sourceHeader: false 表明第一行(列)开始就直接是数据。

  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
      
这个例子汇总source的第一行才是纬度。
常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。

 dimensions: ['product', '2015', '2016', '2017'],
     `这里有四个纬度,默认把第一个纬度映射到x轴,后面纬度映射到y轴。`


理解话语

这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。

在第一个直角坐标系中,是映射到了dataset 的每一行了,不过映射了三回而已。

map 系列

  • 配置了 map的 series属性点击了item,item会高亮,配置 geo 或则series都会 显示出地图效果
  • 通过给 map的 series 的 data 属性设置 我们写成的 行政区划code数组,注意数组里对象 的属性为 name 和 code, 注意name属性名字不可以修改,修改需要参考配置文件,name属性是与匹配 地图json里的 每个区域的名字匹配
  • 可以给series 里的 data 数组的某一项单独设置itemStyle, 然后再mapChart 触发 ‘click’ 事件时候,然后把这个itemStyle 对象置为 {} ,可以做到局部高亮map的某个region; 或者使用 dispatchAction({ type: ‘highlight’, name: “” }) 搭配 dispatchAction({ type: ‘downplay’,name:“”}) 也可以实现

series

在series 里的item配置 label等属性会覆盖全局设置的label属性

设置pie的label全部显示

			series: [
			 label: {
              width: 100,
              bleedMargin: -30,
              }
			]

//通过设置bleedMargin 为负值

地图打点经纬度需要精确到8位才能显示

精确到8位才能显示,此外还需要geo声明

data: [
        {name: '123',
        type: 'op',
        value:[120.85293436, 30.38103345,'id123123']},
        {name: '123',
        type: 'op',
        value:[120.21551, 30.25308,'id123123']}
      ],

series 中type为map的系列可以通过geoIndex这个属性来关联geo

关联后,就不会出现地图显示两个问题了,但是series 中type为map的系列itemStyle等属性会失效

          {
            name: 'huzhou',
            type: 'map',
            zlevel: 2,
            mapType: 'huzhou', // 自定义扩展图表类型
            geoIndex: 0, //,map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 geo 组件了
            // top: 100,
            labelLine: {
              show: true
            },
            },
            data: this.mapData
          },

给地图打点需要写出geo

echarts 对提示框数据(tooltip)使用 formatter 进行修改后,前面的小圆点不见了

通过打印 formatter 的 params 参数可以看到有个 marker 属性描绘的是小圆点的标签和样式!所以在下面代码高亮位置加入 params[i].marker 即可正常显示。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'line', // 默认为直线,可选为:'line' | 'shadow'
  },
  formatter(params) {
    let str = '';
    str += `<div>${params[0].name}</div>`;
    for (let i = 0; i < params.length; i += 1) {
      str += `${params[i].marker} <span>${params[i].seriesName}</span> : <span>${params[i].data ? Math.round(params[i].data) : '0'
      }</br>`;
    }
    return str;
  }
}

柱状图堆叠

series里需要堆叠的项目 的 stack设为相同的·值

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13325.html
标签
评论
发布的文章

JMeter断言之JSON断言

2024-07-22 01:07:18

39 | XML、JSON、YAML比较

2024-07-22 01:07:13

String和JSON相互转换

2024-07-22 01:07:11

npm 安装报错

2024-07-22 01:07:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!