主题学习内置主题自定义主题内置主题默认内置了两套主题 , light dark
创建charts对象的时候,多了一个参数,里面的值就可以写默认的2个值
代码是
代码语言:javascript代码运行次数:0运行复制
// init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
// 默认内置了两套主题 , light dark
var mCharts = echarts.init(document.querySelector("div"), 'dark')
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
};
mCharts.setOption(option)
当参数是dart 的时候,图形是
当参数是light 的时候
以上就是默认的两个背景颜色。
自定义主题
在线编辑主题 https://echarts.apache.org/zh/theme-builder.html
从以上的网址里面自定义主题,并且下载主题
以上 的网址打开是这样的
我们自定义完成,点击下载
以上就是我们下载的主体
引入到我们的代码里面
就可以使用了
引入之后就和默认的主体的使用方式一样了。
Copyright © 2022 摩洛哥世界杯_直播世界杯决赛 - dgaida.com All Rights Reserved.