echarts象形柱图 pictorialBar
项目需求
这种属于series-> type的类型是pictorialBar 很多怪形的柱形图都是使用它, 只需要修改series -> symbol的值就可以, 在这里他的类型值是'react'
我建议可以复制我这段代码 自己跑一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2.为ECharts准备一个具备大小的DOM-->
<div id="main" style="width: 600px;height: 400px; border: 1px solid #000;"></div>
<!--1.引入ECharts文件-->
<script src="echarts.min.js"></script>
<script>
//
// 可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
//
//
// 3.基于准备好的dom,初始化ECharts实例
var chartData = [100, 200, 300]; // 数据
var yMax = ''; // 最大值
for (var i = 0; i < chartData.length; i += 1) {
yMax = chartData[i];
}
yMax += yMax / 10;
var yMaxArr= []; // 全部都是最大值, 做图形的底部灰色打底
for (var i = 0; i < chartData.length; i += 1) {
yMaxArr.push(yMax);
}
var chartName = ['你这么笨!', '还不努力,', '你想干嘛?']
var myChart = echarts.init(document.getElementById("main"));
//4.制定图标的配置项和数据
var option = {
// backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
// type: 'none', // 去除鼠标移入的时候的阴影/竖线等
},
backgroundColor: '#ccc', // 浮层的文本背景
textStyle: {
color: 'red', // 浮层的文本颜色
},
// formatter: '{a0}: {c0}<br />{a1}: {c1}'
formatter: '{a}:{c}', //浮层内容格式 a: series中的name c 数据值
},
legend: {
textStyle: {
color: '#ccc'
},
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#ccc'
}
},
show: false,
splitLine: {
show: false
},
},
yAxis: [{
type: 'category',
data: chartName,
splitLine: {
show: false
},
show: false,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
}, { // 第二个y轴 为了让数据在右侧末尾显示
show: true,
inverse: true,
data: chartData,
nameTextStyle: {},// 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
axisLabel: {
textStyle: {
fontSize: 12, //坐标轴名称的大小
color: 'blue', // 坐标轴名称的颜色
},
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '我是打底',
type: 'pictorialBar',
symbol: 'rect', // 类型
yAxisIndex: 0,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: '#ccc',
}
},
label: {
normal: {
position: 'right',
}
},
symbolRepeat: true,
symbolRotate: '45',
symbolSize: [12, 4],
symbolMargin: 2,
data: yMaxArr,
}, {
name: '我是上层方块',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: 'red'
}
},
label: {
normal: {
// show: true, // 数据大小的显示, 100 200 300
textStyle: {
color: '#000000', // 颜色
},
position: 'right',
},
},
barWidth: 10,
symbolRepeat: true,
symbolRotate: '45',
symbolSize: [12, 4],
symbolMargin: 2,
data: [100, 200, 300],
},
// 数据条--------------------我是分割线君------------------------------//
{
show: true,
type: 'bar',
// xAxisIndex: 1, //代表使用第二个X轴刻度
barGap: '-100%',
barWidth: '10%',
itemStyle: {
normal: {
barBorderRadius: 200,
// color: 'yellow',
color: 'transparent', //rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
}
},
label: {
normal: {
show: true,
position: [0, '-20'],
textStyle: {
fontSize:14,
color: 'pink',
},
formatter: function(data) {
return chartName[data.dataIndex];
}
}
},
data: chartData
}
]
};
// 5.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这个是注意点 color的颜色一定要是透明色, 因为这个颜色是柱状图的填充色,
yAxis: [ { // 第二个y轴 为了让数据在右侧末尾显示
show: true,
inverse: true,
data: chartData,
nameTextStyle: {},// 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
axisLabel: {
textStyle: {
fontSize: 12, //坐标轴名称的大小
color: 'blue', // 坐标轴名称的颜色
},
},
}],
不知道你们有没有碰到修改坐标轴名称的颜色问题, 向我这种坐标轴线不显示的还好, 可以设置坐标轴线的颜色, 因为坐标轴名称的颜色默认的取的就是坐标轴线的颜色,
如果显示了轴线呢? 坐标轴线的颜色和 坐标轴名称的颜色不一样的话 怎么办, 查了文档, 说是使用nameTextStyle就可以, 但是并没有效果, 自己琢磨的时候意外发现使用axisLabel可以修改, 值得记录一下