说一千道一万，图标样式在【series】中修改，边距在【grid】中修改，鼠标指向显示数据在【tooltip】中修改
JS引用：
<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>
HTML：
<div id="ry_char" style="height:100%;90%;margin-left:12%;margin-top:0.5%"></div>
方形立体柱状图-------JS
<script type="text/javascript">
function cc(){
var myChart = echarts.init(document.getElementById('ry_char'));
const data = [220, 182, 191, 234]
// 指定图表的配置项和数据
var option = {
roam: false, // 禁止滚轮事件
tooltip: {
show: false,
},
grid: {
x: '0%', //距离左边
x2: '0%', //距离右边
y: '15%', // 上距离
y2: '15%', // 下距离
},
xAxis: {
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: 0, //0度角倾斜显示
show: true,
textStyle: {
color: '#333333'
},
},
axisLine: {
lineStyle: {
color: '#B6C1C4',
},
},
axisTick: {
show: false,
},
data: ['1日', '2日', '3日', '4日']
},
yAxis: {
show: false,
},
series: [{
name: 'a',
tooltip: {
show: false
},
data: data,
type: 'bar',
barWidth: 10,
barGap: 200,
barCategoryGap: 200,
// 基准线
markLine: {
silent: true, // 不响应鼠标事件
symbol: ['none', 'none'],
position: 'top',
label: {
show: false,
},
lineStyle: {
normal: {
color: '#D3D3D3' // 这儿设置安全基线颜色
}
},
data: [{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
}, ],
},
label: {
show: true, // 柱子顶部的数值
position: 'top',
top: 0,
fontSize: 6,
offset: [0, -10],
formatter: function(params) {
let num = params.value;
if (num > 1024) {
return (num / 1024).toFixed(2) + 'GB'
} else if (num < 1024 && num > 0) {
return num.toFixed(2) + 'MB'
} else {
return '';
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#4729FB" // 0% 处的颜色
}, {
offset: 0.5,
color: "#3077F7" // 50% 处的颜色
}, {
offset: 1,
color: "#1FB0F4" // 100% 处的颜色
}], false)
}
},
// barGap: 0
}, {
type: 'bar',
barWidth: 4,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#235DFF" // 0% 处的颜色
}, {
offset: 0.5,
color: "#59ACF7" // 50% 处的颜色
}, {
offset: 1,
color: "#71CAFF" // 100% 处的颜色
}], false)
}
},
barGap: 0,
data: data.map(item => item + 4.5)
}, {
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 0,
borderColor: '#47A6FF',
color: '#1AC0F4',
},
symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
symbolSize: ['13', '3'],
symbolOffset: ['-1', '-2'], // 左右 ，上下
symbolRotate: 0,
symbolPosition: 'end',
data: data,
z: 3
}],
// 可左右滑动
dataZoom: [{
show: false,
realtime: true,
start: 30,
end: 50
}, {
type: 'inside',
realtime: false,
start: 30,
end: 50,
zoomOnMouseWheel: false, // 禁用滚轮
}],
};
myChart.setOption(option);
}
</script>
圆形立体柱状图--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);
}