Echarts样式设置

离恨却如春草，更行更远还生。

Echarts 样式设置

• 样式设置的几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。

1. 颜色主题（Theme）
2. 调色盘
3. 直接样式设置（itemStyle、lineStyle、areaStyle、label、…）
4. 视觉映射（visualMap）

颜色主题

• Echarts 内置了两套主题，分别为 light 和 dark

var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

调色板

• 调色盘可以在 option 中设置。
• 调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。
• 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

直接的样式

• 直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

itemStyle: {
      normal: {
          // color: 各异,
          label: {
              show: false
              // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
              //           'inside'|'left'|'right'|'top'|'bottom'
              // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
          },
          lineStyle: {
              width: 2,
              type: 'solid',
              shadowColor : 'rgba(0,0,0,0)', //默认透明
              shadowBlur: 5,
              shadowOffsetX: 3,
              shadowOffsetY: 3
          }
      },
      emphasis: {
          // color: 各异,
          label: {
              show: false
              // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
              //           'inside'|'left'|'right'|'top'|'bottom'
              // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
          }
      }
  },

高亮的样式

• 在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。
• 如果要自定义高亮样式可以通过 emphasis 属性来定制

// 高亮样式。
emphasis: {
    itemStyle: {
        // 高亮时点的颜色
        color: 'red'
    },
    label: {
        show: true,
        // 高亮时标签的文字
        formatter: '高亮时显示的标签内容'
    }
}