echarts使用步骤（ECharts样式设置介绍）
echarts使用步骤（ECharts样式设置介绍）比如上图中我们选中了一个主题，将 JSON 代码保存为 wonderland.json。<!-- 引入主题 --> <script src="https://www.runoob.com/static/js/wonderland.js"></script> ... // HTML 引入 wonderland.js 文件后，在初始化的时候调用 var myChart = echarts.init(dom 'wonderland') // ... 尝试一下 »如果主题保存为 JSON 文件，那么可以自行加载和注册。var chart = echarts.init(dom 'light'); 或者 var chart = echarts.init(dom 'dark');尝试一下 »另
颜色主题
ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。
使用方式如下：
实例
var chart = echarts.init(dom 'light');
或者
var chart = echarts.init(dom 'dark');
尝试一下 »
另外，我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。
目前主题下载提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本，可以将 JS 主题代码保存一个 主题名.js 文件，然后在 HTML 中引用该文件，最后在代码中使用该主题。
比如上图中我们选中了一个主题，将 JS 代码保存为 wonderland.js。
实例
<!-- 引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
...
// HTML 引入 wonderland.js 文件后，在初始化的时候调用
var myChart = echarts.init(dom 'wonderland')
// ...
尝试一下 »
如果主题保存为 JSON 文件，那么可以自行加载和注册。
比如上图中我们选中了一个主题，将 JSON 代码保存为 wonderland.json。
实例
//主题名称是 wonderland
$.getJSON('wonderland.json' function (themeJSON) {
echarts.registerTheme('wonderland' themeJSON)
var myChart = echarts.init(dom 'wonderland')
})
调色盘
调色盘可以在 option 中设置。
调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。
可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
option = {
// 全局调色盘。
color: ['#c23531' '#2f4554' style="color: #3366CC;">'#61a0a8' '#d48265' '#91c7ae' '#749f83' '#ca8622' '#bda29a' '#6e7074' '#546570' '#c4ccd3']
series: [{
type: 'bar'
// 此系列自己的调色盘。
color: ['#dd6b66' '#759aa0' '#e69d87' '#8dc1a9' '#ea7e53' '#eedd78' '#73a373' '#73b9bc' '#7289ab' '#91ca8c' '#f49f42']
...
} {
type: 'pie'
// 此系列自己的调色盘。
color: ['#37A2DA' '#32C5E9' '#67E0E3' '#9FE6B8' '#FFDB5C' '#ff9f7f' '#fb7293' '#E062AE' '#E690D1' '#e7bcf3' '#9d96f5' '#8378EA' '#96BFFF']
...
}]
}
全局调色盘实例：
实例
series: [{
type: 'pie'
// 此系列自己的调色盘。
color: ['#ff0000' '#00ff00' '#0000ff' '#9FE6B8' '#FFDB5C' '#ff9f7f' '#fb7293' '#E062AE' '#E690D1' '#e7bcf3' '#9d96f5' '#8378EA' '#96BFFF']
...
}]
直接的样式设置 itemStyle lineStyle areaStyle label ...
直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。
直接样式设置的另一篇介绍，参见 ECharts 饼图。
高亮的样式：emphasis
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。
如果要自定义高亮样式可以通过 emphasis 属性来定制：
实例
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: 'red'
}
label: {
show: true
// 高亮时标签的文字
formatter: '高亮时显示的标签内容'
}
}
