Echarts样式和高亮设置

最新推荐文章于 2024-06-16 11:18:18 发布

Akimoto Hiroshi

最新推荐文章于 2024-06-16 11:18:18 发布

阅读量4.1k

点赞数 1

分类专栏： echarts 文章标签： echarts html javascript

本文链接：https://blog.csdn.net/dyw3390199/article/details/120633836

版权

echarts 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

1.样式修改

以饼图为例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图设置样式和高亮</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var pieData = [
      {
        name: 'shanghai',
        value: 157279
      },
      {
        name: 'hefei',
        value: 115623,
        itemStyle: {
          color: 'purple'
        },
        label: {
          color: 'purple'
        }
      },
      {
        name: 'wuxi',
        value: 180044
      },
      {
        name: 'nanjing',
        value: 165681
      },
      {
        name: 'hangzhou',
        value: 152465
      },
      {
        name: 'suzhou',
        value: 179174
      },
    ]

    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: {
            show: true,
            formatter: function (args) {
              return `${args.name}\n\n人均GDP: ${args.value}`
            }
          },
          // radius: '20%' // 会以容器的较小的一边的一半为基准去计算
          // radius: ['65%', '80%'] // 圆环效果 数组[0]表示圆环内半径 数组[1]表述圆环外半径
          roseType: 'radius', // 南丁格尔图 饼图每一个区域的半径都不太一样
          selectedMode: 'multiple', // 选中的效果 让选中区域远离原点一小段距离 single和multiple
          selectedOffset: 30 // 设置选中区域远离原点的距离
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>

核心代码：
在这里插入图片描述

2.高亮设置

在这里插入图片描述

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图设置样式和高亮</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var pieData = [
      {
        name: 'shanghai',
        value: 157279
      },
      {
        name: 'hefei',
        value: 115623,
        itemStyle: {
          color: 'purple'
        },
        label: {
          color: 'purple'
        },
        emphasis: {
          itemStyle: {
            color: 'yellow'
          },
          label: {
            color: 'red'
          }
        }
      },
      {
        name: 'wuxi',
        value: 180044
      },
      {
        name: 'nanjing',
        value: 165681
      },
      {
        name: 'hangzhou',
        value: 152465
      },
      {
        name: 'suzhou',
        value: 179174
      },
    ]

    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: {
            show: true,
            formatter: function (args) {
              return `${args.name}\n\n人均GDP: ${args.value}`
            }
          },
          // radius: '20%' // 会以容器的较小的一边的一半为基准去计算
          // radius: ['65%', '80%'] // 圆环效果 数组[0]表示圆环内半径 数组[1]表述圆环外半径
          roseType: 'radius', // 南丁格尔图 饼图每一个区域的半径都不太一样
          selectedMode: 'multiple', // 选中的效果 让选中区域远离原点一小段距离 single和multiple
          selectedOffset: 30 // 设置选中区域远离原点的距离
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>

Akimoto Hiroshi

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
Echarts样式和高亮设置

1.样式修改以饼图为例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫

专栏目录