echarts 立体柱状图，渐变柱状图
说一千道一万，图标样式在【series】中修改，边距在【grid】中修改，鼠标指向显示数据在【tooltip】中修改
JS引用：
HTML：
方形立体柱状图-------JS
圆形立体柱状图--js
function render(){
myChart1 = echarts.init(document.getElementById('ry_char'));
var xData2 = ["容城", "雄县", "安新", "雄县"];
var data1 = [30, 20, 30, 20];
option = {
//backgroundColor: '#021132',
grid: {
//left: 100,
//bottom: 100
},
xAxis: {
data: xData2,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
fontSize: 14,
},
margin: 10, //刻度标签与轴线之间的距离。
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// textStyle: {
// color: '#fff',
// fontSize: 20,
// },
//不显示Y轴数值
formatter: function () {
return "";
}
}
},
series: [
//数据低下的圆片
{
name: "",
type: "pictorialBar",
symbolSize: [25, 15],
symbolOffset: [0, 10],
z: 12,
itemStyle: {
opacity: 1,
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25B2E0' // 0% 处的颜色
}, {
offset: 1,
color: '#25B2E0' // 100% 处的颜色
}], false)
},
barBorderRadius: 10,
borderWidth: 10,
},
data: [1, 1, 1, 1]
},
//数据的柱状图
{
name: '',
type: 'bar',
barWidth: 25,
barGap: '-100%',
itemStyle: { //lenged文本
opacity: 1, //这个是 透明度
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#33ADE0' // 0% 处的颜色
}, {
offset: 1,
color: '#33ADE0' // 100% 处的颜色
}], false)
}
},
data: data1
},
//替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
{
type: 'bar',
barWidth: 25,
barGap: '-100%',
stack: '',
itemStyle: {
color: 'transparent'
},
data: data1
},
//数据顶部的样式
{
name: "",
type: "pictorialBar",
symbolSize: [25, 15],
symbolOffset: [0, -8],
//barWidth: 20,
//showBackground: true,
//barMaxWidth: 20,
//barMinWidth: 5,
z: 10,
itemStyle: {
normal: {
opacity: 1,
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0D487E' // 0% 处的颜色
}, {
offset: 1,
color: '#229AD2' // 100% 处的颜色
}], false)
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'green',
fontSize: 14,
top: 100,
},
formatter: function (param) {
return param.data
}
}
}
},
symbolPosition: "end",
data: data1
},
//阴影的顶部
{
name: "", //头部
type: "pictorialBar",
symbolSize: [25, 15],
symbolOffset: [0, -10],
z: 10,
symbolPosition: "end",
itemStyle: {
color: '#0B2869',
opacity: 1,
},
data: [100, 100, 100, 100]
},
//后面的背景
{
name: '2019',
type: 'bar',
barWidth: 25,
barGap: '-100%',
z: 0,
itemStyle: {
color: '#0B2869',
opacity: .7,
},
data: [100, 100, 100, 100]
}
]
};
myChart1.setOption(option);
}
渐变图js
function loadmain3() {
var cba = cbsr; var cbb = cbsc; var cbc = cbgn; var cbd = cbyc;
myChart3 = echarts.init(document.getElementById('cb_char'));
var option3 = {
title: {
// text: 'Rainfall vs Evaporation',
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
},
grid: {
top: '10%',
// left: '10%',
// right: '10%',
bottom: '0.5%',
height: '80%',
containLabel: true
},
// calculable: true,
xAxis: [
{
// type: 'category',
// prettier-ignore
data: ['驶入', '驶出', '港内', '重点'],
axisLabel: {
show: true,
color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
],
series: [
{
name: '总数量',
type: 'bar',
data: [cba, cbb, cbc, cbd],
barWidth: 20,
showBackground: true,
barMaxWidth: 20,
barMinWidth: 5,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: '#00555a' },
{ offset: 0.5, color: '#01a3ad' },
{ offset: 0, color: '#01eefe' },
])
},
// markPoint: {
// data: [
// { type: 'max', name: 'Max' },
// { type: 'min', name: 'Min' }
// ]
// },
markLine: {
label: {
show: true,
color: '#fff',//气泡中字体颜色
},
data: [{ type: 'average', name: 'Avg' }]
}
}
]
};
myChart3.setOption(option3);
}