echarts折线图和柱状图结合绘制
echarts 绘制 结合 柱状图 折线图
2023-09-14 09:04:07 时间
代码:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}, {
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle',//拐点样式
symbolSize: 18,//拐点大小
itemStyle: {
normal: {
lineStyle: {
width: 3,//折线宽度
color: "#FF0000"//折线颜色
},
color: 'red',//拐点颜色
borderColor: '#000000',//拐点边框颜色
borderWidth: 3//拐点边框大小
},
emphasis: {
color: '#000000'//hover拐点颜色定义
}
},
}
]
};
相关文章
- ECHarts.js
- vue+echarts实现动态绘制图表及异步加载数据的方法
- ECharts配置title(标题)字体颜色样式属性修改
- 修改Echarts提示框(tooltip)的位置和宽高背景色等
- 自定义echarts仪表盘去掉指针
- vuejs监听页面宽度变化重新加载echarts图表
- 如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题
- 160:vue+openlayers 地图上添加Echarts柱状图
- go-echarts 安装
- Vue环境下用ECharts绘制中国地图,并实现拖动、缩放与各省份自动轮播高亮显示
- Django 配合Echarts绘制图表
- Echarts中的柱状图--前后台接口联调
- Echarts 雷达图设置拐点大小和形状,tooltip后文字不居中对齐
- Echarts修改柱状图柱子的宽度
- 【Echarts雪花宝典特殊示例100+】 目录