Echarts 柱状图多条柱子颜色宽度标题

最新推荐文章于 2024-05-30 23:16:00 发布

po123op123

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量7.7k

点赞数 2

分类专栏：页面效果文章标签： Echarts 柱状图多条柱子柱子颜色柱子距离

本文链接：https://blog.csdn.net/po123op123/article/details/73500633

版权

页面效果专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>

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

// 指定图表的配置项和数据
var option = {
tooltip: {
show: true

//右上角工具栏

toolbox: {show : true, feature : {
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
saveAsImage : {show: true}
}
},

// 图例

legend: {
x:'right', //靠右
data:['销量','销量1'] //这里要与下面的name对应
},
xAxis : [
{
type : 'category',
data : ["A","B","C","D","E","F"]
}
],
yAxis : [
{

type : 'value' ,

splitLine: { // 控制Y轴的分隔线(辅助线)
show: false, // 默认显示，属性show控制显示与否
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},

}
],
series : [
{
"name":"销量",
"type":"bar",
"barGap":'5%', //两个柱子距离
itemStyle:{
normal:{color:'#ab78ba', //柱状颜色
label : {
show : true, //柱头数字
position : 'top',
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
"data":[5, 20, 40, 10, 10, 20]
},
{
"name":"销量1",
"type":"bar",
"data":[25, 10, 20, 10, 10, 20]
}
]
};

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