美文网首页
echarts自定义主题

echarts自定义主题

作者: 菜鸟搬砖 | 来源:发表于2018-12-12 10:28 被阅读40次

这是官方文档初始化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);

结束!

相关文章

网友评论

      本文标题:echarts自定义主题

      本文链接:https://www.haomeiwen.com/subject/dqluhqtx.html