echarts自定义主题

这是官方文档初始化echarts时的参数:

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number

    renderer?: string

    width?: number|string

    height? number|string}) => ECharts

*dom: 实例容器,一般是一个具有高宽的div元素。

*theme:应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称

*opts:附加参数。有下面几个可选项:

    1. devicePixelRatio:设备像素比,默认取浏览器的值window.devicePixelRatio。

    2.renderer:渲染器,支持 'canvas' 或者 'svg'。

    3.width:可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。

    4.height:可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。


在初始化之前自己先把自己的颜色主题注册进去:

var theme ={

    color: [

        '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',

        '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',

        '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',

        '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'

    ]

}

echarts.registerTheme('themes', theme);

// registerTheme函数接收两个参数,第一个是主题的名称,第二个是主题对象。

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

//  在初始化的时候将你注册的主题名称写入,即可完成注册。

var option={}

myChat.setOption(option);


结束!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,828评论 19 139
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 8,001评论 2 9
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,212评论 1 45
  • 亲爱的学弟学妹: 又是一年盛夏,在烈日的余晖中你们将带着对未来最美好的愿景跨进大学的校门,开启四年如火如荼的青春岁...
    echo敏阅读 6,028评论 1 3
  • 生活绘(6) 高考过去了,家长们还在忙于争论高考卷选A选B的问题...... 世界杯来了,女球迷们嗅到了空气中浓浓...
    Echo手绘吧阅读 3,555评论 4 8

友情链接更多精彩内容