ECharts的高级使用(主题、调色板、颜色渐变)

最新推荐文章于 2024-04-15 11:36:25 发布

漂流の少年

最新推荐文章于 2024-04-15 11:36:25 发布

阅读量4.2k

点赞数 9

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

本文链接：https://blog.csdn.net/YINZHE__/article/details/120392874

版权

ECharts 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1. 主题

1.1 内置的主题

init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题

默认内置了两套主题，light、dark

<!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>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      // 使用内置主题
      var mCharts = echarts.init(document.querySelector('div'),'light')
      //var mCharts = echarts.init(document.querySelector('div'),'dark')
      var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
      var yDataArr = [88, 45, 48, 89, 99, 77]
      var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: '语文',
            type: 'bar',
            barWidth: '50%',
            data: yDataArr
        }]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

不设置主题

内置主题light

内置主题dark

1.2 自定义主题

①在主题编辑器中编辑主题，去官网

主题编辑器 - Apache ECharts
②下载主题，是一个js文件

③引入主题js文件

我这里命名为theme.js

④在init方法中使用主题

在init方法中之所以用'theme'来引入，要看theme.js中的registerTheme方法

<!DOCTYPE html>
<html lang="en">
<head>
  ...    //其它代码不变
  <script src="theme/theme.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      // 使用自定义主题
      var mCharts = echarts.init(document.querySelector('div'),'theme')
      ...    //其它代码不变
  </script>
</body>
</html>

2. 调色板

调色板就是一组颜色，图形、系列会自动从其中选择颜色

2.1 主题调色板

在下载的theme.js主题中的registerTheme方法中设置

<!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>Document</title>
  <script src="lib/echarts.min.js"></script>
  //引入自定义主题
  <script src="theme/theme.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      //使用自定义主题中的调色盘
      var mCharts = echarts.init(document.querySelector('div'),'theme')
      var pieData = [
        {
          name: '淘宝',
          value: 11231
        },
        {
          name: '京东',
          value: 22673
        },
        {
          name: '唯品会',
          value: 6123
        },
        {
          name: '聚美优品',
          value: 6700
        }
      ]
      var option = {
        series: [
          {
            type: 'pie',
            data: pieData,
            selectedMode: 'multiple',
            selectedOffset: 30,
          }
        ]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

不使用主题调色板

使用主题调色板

2.2 全局调色板

使用全局调色盘会覆盖主题调色盘

<!DOCTYPE html>
<html lang="en">
<head>
  ...        //原代码不变
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      ...    //原代码不变
      var option = {
        // 使用全局调色盘
        color: ['red','blue','skyblue','yellow'],
        series: [
          {
            type: 'pie',
            data: pieData,
            selectedMode: 'multiple',
            selectedOffset: 30,
          }
        ]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

2.3 局部调色板

使用局部调色盘会覆盖全局调色盘

var option = {
        // 使用全局调色盘
        color: ['red','blue','skyblue','yellow'],
        series: [
          {
            type: 'pie',
            // 使用局部调色盘
            color: ['black','green','pink','orange'],
            data: pieData,
            selectedMode: 'multiple',
            selectedOffset: 30,
          }
        ]
      }

3. 颜色渐变

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>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      var mCharts = echarts.init(document.querySelector('div'))
      var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
      var yDataArr = [88, 45, 48, 89, 99, 77]
      var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            type: 'bar',
            data: yDataArr,
            itemStyle:{
              color: {
                type: 'linear',  //线性渐变
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0, color: 'red'   //0%处的颜色为红色
                  },
                  {
                    offset: 1, color: 'blue'   //100%处的颜色为蓝色
                  }
                ]
              }
            }
        }]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

3.2 径向渐变

      var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            type: 'bar',
            data: yDataArr,
            itemStyle:{
              color: {
                type: 'radial',  //径向渐变
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0, color: 'red'   //0%处的颜色为红色
                  },
                  {
                    offset: 1, color: 'blue'   //100%处的颜色为蓝色
                  }
                ]
              }
            }
        }]
      }

漂流の少年

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
4
评论
ECharts的高级使用(主题、调色板、颜色渐变)

目录1. 主题1.1 内置的主题init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题默认内置了两套主题，light、dark<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
复制链接

扫一扫