echarts进阶--主题显示相关

最新推荐文章于 2024-05-29 16:56:12 发布

不吃鱼皮

最新推荐文章于 2024-05-29 16:56:12 发布

阅读量288

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45818290/article/details/126704536

版权

echarts 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在ECharts中使用和定制图表主题，包括内置的light和dark主题，以及如何引入和应用自定义主题。同时，讲解了调色盘的使用，包括全局和局部调色盘，并展示了颜色渐变的配置方法，如线性渐变和径向渐变。此外，还提到了图表样式的优先级和图表的自适应调整，以及在窗口大小变化时如何实现ECharts图表的自动重绘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内置主题

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();
}