ECharts 3 is no longer mandatory to use AMD's way to introduce on-demand, and the AMD loader is no longer built into the code. Therefore, the import method is much simpler, and it only needs to be imported with the script tag like a normal JavaScript library.
<!DOCTYPE html><html><head><metacharset="utf-8"><!-- 引入 ECharts 文件 --><scriptsrc="echarts.min.js"></script></head></html>draw a simple diagram
Before drawing, we need to prepare a DOM container with height and width for ECharts.
<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><divid="main"style="width:600px;height:400px;"></div></body>Then you can initialize an echarts instance through the echarts.init method and generate a simple histogram through the setOption method. The following is the complete code.
<!DOCTYPE html><html><head><metacharset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><scriptsrc="echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option ={
title:{
text:'ECharts 入门示例'},
tooltip:{},
legend:{
data:['销量']},
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]}]};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);</script></body></html>
---Some basic configuration:
xAxis: [
{
type : 'category',
// name:'Amount',
//This is set to false, so the x-axis below will not be displayed, the default is true
show: false,
//Here, it's the name of each column. It's fine according to the actual situation. I'll write these three first.
data : ['most','average','minimum'],
axisLabel: {
//This is the inclination angle, and it is also considered that when there are too many texts, the mode overlay adopts the inclination
// rotate: 30,
//This is set when there are too many files on the x-axis. If there are too many texts, the default is to display at intervals. If set to 0, the marks are all displayed. Of course, if the x-axis is not displayed, it is meaningless.
interval :0
}
}
],
yAxis : [
{
type : 'value',
name:'quantity',
//The following is very simple, what is the minimum, what is the maximum, and how much is added at a time by default
min: 0,
max: 30,
interval: 6,
//The following is the display format, which is generally used
axisLabel: {
formatter: '{value} 包'
}
}
],
series : [
{
name: 'quantity',
type: 'bar',
itemStyle: {
normal: {
//Okay, here is the highlight, define a list, and then obtain different values according to the reason, so that is achieved,
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
//The following is the setting of whether to display, display position and display format
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter: '{b}\n{c}'
}
}
},
//Set the width of the column, if the data is too small, the column is too wide and unsightly~
barWidth:70,
data: [28,15,9,4,7,8,23,11,17]
}
]
Configure styles for each data item:
Just set itemSytle for each element of the data array in the series.