echarts柱状图，立体图形开发与注意事项

引入echarts
import echarts from ‘./echarts.min.js’;
文本部分

js 部分
// 数据
var ladyList = [
{
name: ‘去年’,
data: [ 30, 40, 200, 5, 66, 77 ],
value: [‘#1A5FD7’, ‘#488BFF’, ‘#4688FA’],
color: ‘#4688FA’
},
{
name: ‘今年’,
data: [1330, 140, 2, 15, 166, 77],
value: [“#F37B20”, “#FFA355”, “#FFA355”],
color: ‘#FFA355’
}
]
function findColor(colors) {
var newColors = []
colors.forEach((res, ind) => {
var color = {
type: “linear”,
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: res.value[0],
},
{
offset: 0.5,
color: res.value[0],
},
{
offset: 0.5,
color: res.value[1],
},
{
offset: 1,
color: res.value[1],
},
]
}
newColors.push({
…res,
color
})
})
return newColors
}
var options = {
serverData: function(mydata, markLineFlag) {
// 宽度 15px 的柱状图
// 2个柱状图 两个柱状图 z2 -75% z3 -75% 第二个图 z2 75% z3 75%
// 3个柱状图 第一个柱状图 z2 -150% z3 -140% 第二个图 z2 0% z3 0% 第三个图 z2 150% z3 140%
var colors = findColor(mydata.ladyList)
var symbolOff = []
if (colors.length == 1) {
symbolOff = [
{
percentage2: ‘0%’,
percentage3: ‘0%’
}
]
} else if (colors.length == 2) {
symbolOff = [
{
percentage2: ‘-75%’,
percentage3: ‘-75%’
},
{
percentage2: ‘75%’,
percentage3: ‘75%’
}
]
} else if (colors.length == 3) {
symbolOff = [
{
percentage2: ‘-150%’,
percentage3: ‘-140%’
},
{
percentage2: ‘0%’,
percentage3: ‘0%’
},
{
percentage2: ‘150%’,
percentage3: ‘140%’
},
]
}
var newServer = []
colors.forEach((res, ind) => {
newServer.push({
z: 1,
name: mydata.ladyList[ind].name,
type: ‘bar’,
barWidth: 15,
itemStyle: {
normal: {
color: res.color
}
},
barGap: “50%”,
data: mydata.ladyList[ind].data,
})
newServer.push({
z: 2,
name: mydata.ladyList[ind].name,
type: ‘pictorialBar’,
itemStyle: {
normal: {
color: res.color
}
},
symbolOffset: [symbolOff[ind].percentage2, “30%”],
symbolSize: [15, 10],
data: mydata.ladyList[ind].data,
tooltip: {
show: false,
}
})
newServer.push({
z: 3,
name: mydata.ladyList[ind].name,
type: ‘pictorialBar’,
symbolPosition: “end”,
itemStyle: {
normal: {
borderColor: res.value[2],
borderWidth: 2,
color: res.value[2],
}
},
symbol: “diamond”,
symbolOffset: [symbolOff[ind].percentage3, “-70%”],
data: mydata.ladyList[ind].data,
symbolSize: [20 - 4, (10 * (20 - 4)) / 20],
tooltip: {
show: false,
},
markLine: markLineFlag?{
data: [{ yAxis: mydata.ladyList[ind].data[0], symbol: ‘none’ }]
}:undefined
})
})
return newServer
}
}
var option = {
legend: [
itemWidth: 14, // 柱状图以宽度为14的标准调整的样式
data: [{‘去年’, ‘今年’}],
selectedMode: false, // 取消下标的点击事件，因为柱状图是，3种不同的图形展示出来的，控制显隐会使图形位置变化
]，
toolbox: { // 自定义按需使用
show: true,
},
grid: { // 自定义按需使用
left: ‘15%’,
containLabel: true
},
xAxis: [ // 自定义按需使用
{
type: ‘category’,
data: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’],
position: 100
}
],
yAxis: [ // 自定义按需使用
{
type: ‘value’,
name: ‘万元’,
nameLocation : ‘start’,
nameTextStyle: {
padding: [0,0,0,-35]
}
}
],
series:options.serverData(ladyList, false) // 第二个参数表示是否有基准线，此代码是以第一条数据的值为基准线
}