ECharts-条形图制作


@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/echarts.min.js"></script>
<title>Echarts</title>
</head>
<body>
<div id="main" style=" 900px;height:400px;"></div>

<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['订单数','销售额']
},
xAxis: {
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: [
{
name: '订单数',
type: 'value',
max: 60,
min: 0,
scale:true,
},
{
name: '销售额(万元)',
//nameLocation: 'start',
scale:true,
max: 60,
min:0,
type: 'value',

}
],
series: [{
name: '订单数',
type: 'line',
label: {
normal: {
show: true,
position: 'top'
}
},
//areaStyle: { normal: {} },

data: [5, 20, 26, 10, 10, 20,15,21,9,14,19,26]
},
{
name: '销售额',
type: 'line',

yAxisIndex: 1,//使销售额受右边Y轴控制

label: {
normal: {
show: true,
position: 'top'
}
},
//areaStyle: { normal: {} },

data: [20,36,40,30,28,38,42,50,39,29,34,40]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/DotaSteam/p/5454116.html