1.<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="barMain" style="height:400px"></div>
function loadEcharts(){
//initialization
var myChart = echarts.init(document.getElementById('barMain'));
//Specify the configuration items and data of the chart
var option = {
title:{},//title
tooltip:{},//tip box
legend:{},
grid:{},
xAxis : [],//x axis
yAxis : [],//y axis
series : []//Data, echarts type (curve, column, cake)
};
myChart.setOption(option,true); //When the second parameter of setOption is true, it will prevent data merging
}
}
2. Examples
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="barMain" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
);
function drawEcharts(ec){
loadEachatrs(ec);
//drawLine(ec);
}
function loadEachatrs(ec){
var myChart = ec.init(document.getElementById('barMain'));
var option = {
title : {//Title
text: 'Product Inventory Relationship Diagram',
subtext: 'The data comes from the editor',
x: 'center',
align: 'right'
},
tooltip:{//Whether the mouse hovers over the bar chart/curve to load the prompt box
show: true
},
legend:{
data:["Type","Item"],
x: 'left',
y:30,
padding: [5,35,5,5]
},
grid:{//Control the interval between the graphics area and the chart container, which is the ratio between the drawing area and the div with the id of barMainhttp: //www.mamicode.com/info -detail-1556089.html
"borderWidth":0,
top:100,
containLabel:true
},
xAxis : [
{
type : 'category',
name:"data",
data : ["shirt","cardigan", "Chiffon shirt", "Pants", "High heels", "Socks"],
axisLabel:{//Add this x-axis to show that the font is inclined
interval:0,
rotate:-30
}
}
],
yAxis :[
{
name: 'number',
type: 'value',
max: 50
}
],
series : [
{
"name":"种类",
"type":"line",//曲线图
"data":[5, 20, 40, 10, 10, 20],
},{
"name":"Item",
"type":"bar",//Histogram
"data":[25, 20, 20, 20, 10, 20],
itemStyle:{normal:{label:{ show:true,position:'top'}}}
}
]
};
myChart.setOption(option,true); //When the second parameter of setOption is true, it will prevent data merging
}
</script>
</body>
///////////////////////////////////////////// //////////////////////////////////////////// Notes ///////////////////////////////////////////// ////////////////////////////////
The value of the name in the series should be the same as the data value in the legend, otherwise, when the legend is clicked, the graph will not have the function of clicking to disappear and click to display.