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

目录

1. 主题

1.1 内置的主题

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

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

不设置主题

   

内置主题light

内置主题dark

1.2 自定义主题 

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

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

③引入主题js文件

我这里命名为theme.js

④在init方法中使用主题 

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

 

  ...    //其它代码不变
  


  

  

2. 调色板

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

2.1 主题调色板

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

  
  
  
  
  
  //引入自定义主题
  


  

  

不使用主题调色板

使用主题调色板

2.2 全局调色板

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

  ...        //原代码不变


  

  

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 线性渐变

 

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%处的颜色为蓝色
                  }
                ]
              }
            }
        }]
      }