<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>通过之前构建的ECharts图表，可以看出构建ECharts图表最重要的是设置图表的参数，即调整option部分的内容。
option中的元素主要是由图表的系列Series和图表、提示框等组件构成。
1.图表的系列Series的设置：
图表的系列Series决定了图表应该以什么方式显示什么内容。
包含看规定了图表的类型以及数据。
一个图表可以有多个系列Series，即组合图表，此时各个系列Series最好分别规定各自的名称。
1.1 定义颜色color
- 颜色主题：在初始化时定义：
var chart = echarts.init(dom, 'dark');、var chart = echarts.init(dom, 'light');dark和light都是EChatrts内置主题，如果需要使用其他没有内置在EChatrts中的主题就需要自己加载。
- 调色盘：给定一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
option = {
// 全局调色盘。
color: [color1,color2,color3,......],
// ...
},option = {
// ...
series: [
{
type: 'bar',
// 此系列自己的调色盘。
color: [color1,color2,color3,......]
// ...
},- 背景颜色：设置图表背景颜色，默认无背景颜色。
option = {
// 全局调色盘。
backgroundColor: color,
// ...
},1.2 文字样式textStyle
textStyle: {
color:'#fff'
},1.3 图形样式
直接样式设置itemStyle：
itemStyle: {
color:'blue'
},高亮样式设置emphasis：
emphasis:{
focus:'none',
label:{},
itemStyle:{}
},1.4 标签样式label
label是指图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label:{
show:true,
//..
},2.EChatrts图表的组件：
EChatrts图表的组件主要包括：
- legend：图例；
- tooltip：提示框；
- toolbox：小工具；
- dataZoom：缩放；
- visualmap：视觉映射；
- grid：坐标系底板；
- xAxis：x轴；
- yAxis：y轴；
2.1 图例组件legend
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
