效果图
drawLines(){
var chartDom = document.getElementById('myChart');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
top:'6%',
right:'10%',
icon: "circle",
textStyle: {
color: "#fff"
},
},
tooltip: {},
dataset: {
source: [
['product', '好评', '中评', '差评'],
['城隍庙',284, 85.8, 27],
['风动碑',284, 73.4,27],
['广惠寺',284, 65.2,27],
['荣国府',168, 53.9,27],
['龙兴寺',284, 53.9,27],
['天宁寺',115, 53.9,27],
['赵云庙',284, 53.9,27],
]
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
// 显示左侧刻度
containLabel:true,
// show:true,
// borderColor:'rgba(101, 124, 168, 1)'
},
xAxis: {
type: 'category',
// 是否让折线和坐标轴留空隙
// boundaryGap:true,
boundaryGap: ['10%', '10%'],
// 控制文字样式 比如颜色 大小
axisLabel:{
color:'#999999',
fontSize:'12px',
fontFamily: 'Microsoft YaHei',
fontWeight: '400',
},
// X轴样式不显示
axisLine:{
show:false
},
// 去除刻度
axisTick:{
show:false
},
data: ['城隍庙','风动碑','广惠寺','荣国府','龙兴寺','天宁寺','赵云庙'],
axisPointer: {
type: 'shadow'
},
splitLine:{
// X轴分割线颜色
lineStyle:{
color:'#1793C7'
}
}
},
yAxis: {
type: 'value',
name:"人数/时间",
// nameLocation:"start",
nameTextStyle:{
color:"#fff",
fontSize:"12px"
},
boundaryGap: ['20%', '20%'],
// name: 'Precipitation',
min: 0,
max: 300,
interval: 60,
axisTick:{
show:false
},
axisLabel: {
color:'#999999',
fontSize:'12px'
},
axisLine:{
show:false
},
//
splitLine:{
// Y轴分割线颜色
lineStyle:{
color:'#1793C7'
}
}
},
series: [
{ type: 'bar',
// 柱形宽度
barWidth:'8%',
borderColor: "#00CCFF",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(15, 176, 249, 1)' },
{ offset: 1, color: 'rgba(0, 204, 255, 0.2)' }
]),
}
},
{ type: 'bar',
barWidth:'8%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(15, 252, 253, 1)' },
{ offset: 1, color: 'rgba(15, 252, 253, 0.5)' }
]),
}
},
{ type: 'bar',
barWidth:'8%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 155, 82, 1)' },
{ offset: 1, color: 'rgba(255, 155, 82, 0.5)' }
]),
}
}
]
};
option && myChart.setOption(option);
}
}