4.柱形图
2020-07-09 本文已影响0人
半生_温暖纯良_Junzer
1.label位置
data: [
{
name:"民间投资",
value:-4,
label:{position:"right"}
},{
name:"工业投资",
value:2,
label:{position:"left"}
},{
运行结果
2.柱形宽度
series: [
{
type: 'bar',
data: [],
barWidth: 15,
3.柱状图每列颜色不同
4.自定义柱形图样式
https://jingyan.baidu.com/article/fea4511a151747f7bb91251f.html
5.柱形图各参数
6.消除多列柱形图间隙
7.柱形图背景
https://blog.csdn.net/qq_41694696/article/details/80077896
等宽背景图
https://echarts.apache.org/examples/zh/editor.html?c=bar-background
https://echarts.apache.org/examples/zh/editor.html?c=doc-example/barGrid-barGap
https://gallery.echartsjs.com/editor.html?c=xkZFtowaDl
color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
运行结果
{
name: '背景',
type: 'bar',
// xAxisIndex: 1,
data: [100, 100, 100, 100, 100,],
itemStyle: {
normal: {
color: 'rgba(102, 102, 102,0.5)'
}
},
barWidth: 40,
zlevel: -1
},
8.柱形图颜色
https://blog.csdn.net/weixin_43798882/article/details/89848153
series: [
{
type: 'bar',
// barWidth: 30,
data,
barWidth: 20,
itemStyle: {
normal: {
//好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
color: function (params) {
// let data = params.data
return params.data.color
},