echarts样式设置

 

官网：Handbook - Apache ECharts

颜色主题（theme):

                                 深色模式
var myChart = echarts.init(dom, 'dark');

其它主题需要下载：主题编辑器 - Apache ECharts

 

也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：

如果主题保存为 JSON 文件，则需要自行加载和注册，例如：

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
  echarts.registerTheme('vintage', JSON.parse(themeJSON));
  var chart = echarts.init(dom, 'vintage');
});

 

如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）

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

// ...

 

调试：

可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜。

只要有color这个属性就能设置相应的颜色
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'
      ]
      // ...
    }
  ]
};

 

 直接的样式设置: itemStyle,lineStyle,areaStyle,label,textStyle, 它里面就可以设置颜色，粗细，位置等等。

 

 

高亮的样式：通过这个emphasis 属性设置