核心提示：Echarts柱状图多条柱子颜色宽度标题。script src=js/echarts.simple.min.js/script!--准备画布--p id=main style=width: 600px...
Echarts柱状图多条柱子颜色宽度标题。
<script src="js/echarts.simple.min.js"></script>
<!--准备画布-->
<p id="main" style="width: 600px;height:400px;"></p>
<!--引人这个js是鼠标划过的时候有效果-->
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
show: true
},
legend: {
data:['销量','销量1'] //这里要与下面的name对应
},
xAxis : [
{
type : 'category',
data : ["A","B","C","D","E","F"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"barGap":'5%', //两个柱子距离
itemStyle:{
normal:{color:'#ab78ba'} //柱状颜色
},
"data":[5, 20, 40, 10, 10, 20]
},
{
"name":"销量1",
"type":"bar",
"data":[25, 10, 20, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
