Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.3 直接的样式设置

亦凉 2024-03-27 16:46 19阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][8ed58d7c74534369adf9b480f68b0ed6.png_pic_center]
> 
> 如侵立删

##### 6. 概念篇 - 【ECharts 中的样式简介】 #####

###### 6.3 直接的样式设置 ######

直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option][] 中，

![在这里插入图片描述][9558fbd6c78a409cb0c7d42c60c808fa.png_pic_center]

很多地方可以设置 [itemStyle][]【图形样式】、[lineStyle][]【线条样式】、[areaStyle][]【区域填充样式。设置后显示成区域面积图。】、[label][]【图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。】 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，`itemStyle`、`label` 等可能出现在不同的地方。

在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，修改代码中的样式看修改后的效果：

var data = [
      [
        [28604, 77, 17096869, 'Australia', 1990],
        [31163, 77.4, 27662440, 'Canada', 1990],
        [1516, 68, 1154605773, 'China', 1990],
        [13670, 74.7, 10582082, 'Cuba', 1990],
        [28599, 75, 4986705, 'Finland', 1990],
        [29476, 77.1, 56943299, 'France', 1990],
        [31476, 75.4, 78958237, 'Germany', 1990],
        [28666, 78.1, 254830, 'Iceland', 1990],
        [1777, 57.7, 870601776, 'India', 1990],
        [29550, 79.1, 122249285, 'Japan', 1990],
        [2076, 67.9, 20194354, 'North Korea', 1990],
        [12087, 72, 42972254, 'South Korea', 1990],
        [24021, 75.4, 3397534, 'New Zealand', 1990],
        [43296, 76.8, 4240375, 'Norway', 1990],
        [10088, 70.8, 38195258, 'Poland', 1990],
        [19349, 69.6, 147568552, 'Russia', 1990],
        [10670, 67.3, 53994605, 'Turkey', 1990],
        [26424, 75.7, 57110117, 'United Kingdom', 1990],
        [37062, 75.4, 252847810, 'United States', 1990]
      ],
      [
        [44056, 81.8, 23968973, 'Australia', 2015],
        [43294, 81.7, 35939927, 'Canada', 2015],
        [13334, 76.9, 1376048943, 'China', 2015],
        [21291, 78.5, 11389562, 'Cuba', 2015],
        [38923, 80.8, 5503457, 'Finland', 2015],
        [37599, 81.9, 64395345, 'France', 2015],
        [44053, 81.1, 80688545, 'Germany', 2015],
        [42182, 82.8, 329425, 'Iceland', 2015],
        [5903, 66.8, 1311050527, 'India', 2015],
        [36162, 83.5, 126573481, 'Japan', 2015],
        [1390, 71.4, 25155317, 'North Korea', 2015],
        [34644, 80.7, 50293439, 'South Korea', 2015],
        [34186, 80.6, 4528526, 'New Zealand', 2015],
        [64304, 81.6, 5210967, 'Norway', 2015],
        [24787, 77.3, 38611794, 'Poland', 2015],
        [23038, 73.13, 143456918, 'Russia', 2015],
        [19360, 76.5, 78665830, 'Turkey', 2015],
        [38225, 81.4, 64715810, 'United Kingdom', 2015],
        [53354, 79.1, 321773631, 'United States', 2015]
      ]
    ];
    
    option = {
      backgroundColor: {
        type: 'radial',
        x: 0.3,
        y: 0.3,
        r: 0.8,
        colorStops: [
          {
            offset: 0,
            color: '#f7f8fa'
          },
          {
            offset: 1,
            color: '#cdd0d5'
          }
        ]
      },
      grid: {
        left: 10,
        containLabel: true,
        bottom: 10,
        top: 10,
        right: 30
      },
      xAxis: {
        splitLine: {
          show: false
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        scale: true
      },
      series: [
        {
          name: '1990',
          data: data[0],
          type: 'scatter',
          symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
          },
          emphasis: {
            focus: 'series',
            label: {
              show: true,
              formatter: function(param) {
                return param.data[3];
              },
              position: 'top'
            }
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: {
              type: 'radial',
              x: 0.4,
              y: 0.3,
              r: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(251, 118, 123)'
                },
                {
                  offset: 1,
                  color: 'rgb(204, 46, 72)'
                }
              ]
            }
          }
        },
        {
          name: '2015',
          data: data[1],
          type: 'scatter',
          symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
          },
          emphasis: {
            focus: 'series',
            label: {
              show: true,
              formatter: function(param) {
                return param.data[3];
              },
              position: 'top'
            }
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: {
              type: 'radial',
              x: 0.4,
              y: 0.3,
              r: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(129, 227, 238)'
                },
                {
                  offset: 1,
                  color: 'rgb(25, 183, 207)'
                }
              ]
            }
          }
        }
      ]
    };

渲染效果

![在这里插入图片描述][99120fa02b4d46349152fce53d13e49d.png_pic_center]

[8ed58d7c74534369adf9b480f68b0ed6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8411a38546264c7a909651c8de3cd4b3.png
[option]: https://echarts.apache.org/option.html#
[9558fbd6c78a409cb0c7d42c60c808fa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5b354efa34c9489ea1a4a6c2ba7d8b29.png
[itemStyle]: https://echarts.apache.org/option.html#series-bar.itemStyle
[lineStyle]: https://echarts.apache.org/option.html#series-line.lineStyle
[areaStyle]: https://echarts.apache.org/option.html#series-line.areaStyle
[label]: https://echarts.apache.org/option.html#series-bar.label
[99120fa02b4d46349152fce53d13e49d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a8d536ba63014189a9dd9473c97bc2b9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.1 在系列中设置数据

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

￡神魔★判官ぃ/ 2024年03月27日 16:47/ 0 赞/ 19 阅读

相关 Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.3 直接的样式设置

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

亦凉/ 2024年03月27日 16:46/ 0 赞/ 20 阅读

相关 Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.4 高亮的样式：emphasis 6.5 通过 visualMap 组件设定样式

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

灰太狼/ 2024年03月27日 16:46/ 0 赞/ 18 阅读

相关 Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.2 调色盘

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

逃离我推掉我的手/ 2024年03月27日 16:46/ 0 赞/ 26 阅读

相关 Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.1 颜色主题(Theme)

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

桃扇骨/ 2024年03月27日 16:46/ 0 赞/ 15 阅读

相关 Apache Echarts 自学笔记 4. 入门篇 - 【在项目中引入Apache Echarts】

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

た入场券/ 2024年03月27日 16:46/ 0 赞/ 20 阅读

相关 Apache Echarts 自学笔记 3. 入门篇 - 【获取Apache Echarts】

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

ゝ一世哀愁。/ 2024年03月27日 16:46/ 0 赞/ 19 阅读

相关 Apache Echarts 自学笔记 1. Echarts简介

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

悠悠/ 2024年03月27日 15:41/ 0 赞/ 9 阅读

相关 echarts自定义样式

一、柱状图x、y轴：（1）实现隐藏x轴，y轴，刻度线，网格 yAxis: { show: true, type: 'value',

迷南。/ 2022年12月15日 03:39/ 0 赞/ 199 阅读

相关 echarts仪表盘样式设置

function fillpan(obj){ var myChart1 = echarts.init($(obj.id)[0]); var opti

古城微笑少年丶/ 2022年04月18日 02:29/ 0 赞/ 899 阅读