echarts进阶--主题 显示相关

内置主题

ECharts中默认内置了两套主题：light dark

在初始化对象方法init中可以指明

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

自定义主题

1.在主题编辑器中编辑主题并下载主题js文件

2.将主题文件放到项目文件夹下

3.引入主题js文件

4.在init方法中使用主题

var myChart = echarts.init(document.getElementById('main'), 'customed')

调色盘

调色盘的作用遵循就近原则

主题调色盘

全局调色盘

option:{
    color:['red','green','blue']
}

局部调色盘

series: [{
    type: 'bar',
    color: ['red','green','blue']
}]

颜色渐变

线性渐变

itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' //0%的颜色
              }, {
                offset: 1, color: 'blue' //100%处的颜色
              }]
            }
          }

效果图

径向渐变

color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0, color: 'red' //0%的颜色
              }, {
                offset: 1, color: 'blue' //100%处的颜色
              }]
            }

效果图

样式

优先级高 会覆盖主题中、调色盘的效果

直接样式

itemStyle、textStyle、lineStyle、areaStyle、label

高亮样式

在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label

图表自适应

当浏览器大小发生改变的时候，如果想让图表也能随之适配变化

1.监听窗口大小变化事件

2.在事件处理函数中调用ECharts实例对象resize即可

window.onresize = function() {
    myChart.resize();
}