| echarts的学习（五）内置主题与自定义主题的学习 | 您所在的位置：网站首页 › echarts开发者工具有哪些 › echarts的学习（五）内置主题与自定义主题的学习 |
echarts的学习（五）内置主题与自定义主题的学习
主题学习内置主题自定义主题内置主题 在这里插入图片描述默认内置了两套主题 , light dark  在这里插入图片描述创建charts对象的时候，多了一个参数，里面的值就可以写默认的2个值 代码是 代码语言：javascript复制 Document // 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 从以上的网址里面自定义主题，并且下载主题 以上 的网址打开是这样的  在这里插入图片描述我们自定义完成，点击下载  在这里插入图片描述 在这里插入图片描述以上就是我们下载的主体 引入到我们的代码里面  在这里插入图片描述就可以使用了  在这里插入图片描述引入之后就和默认的主体的使用方式一样了。 |
【本文地址】
公司简介
联系我们