echarts.js刻度标签实现富文本实现中文+图片的效果解决方法
首先，原型大哥又给我添加难度了，查找echarts官网，找到类似于这样的例子：
该功能在这个基础上作出适当修改。
①通过后台获取到想要的数据类型：
@RequestMapping("/getVehicleTypeStatisticInfo")
public ModelAndView getVehicleTypeStatisticInfo() {
ModelAndView mv = new ModelAndView();
mv.setView(Jackson2Util.jsonView());
long zero=MyDateUtils.getTimeDayZeroLong();
SpptgcsjHjVehiclePassRecord record = new SpptgcsjHjVehiclePassRecord();
record.setStartTime(zero);
List<VehicleTypeStatistic> vehicleTypeStatisticInfo = spptgcsjHjVehiclePassRecordService.getVehicleTypeStatisticInfo(record);
if(null == vehicleTypeStatisticInfo || vehicleTypeStatisticInfo.isEmpty()) {
return null;
}
mv.addObject("json", vehicleTypeStatisticInfo);
return mv;
}
在这里 我后台返回的数据类型为：
初始化的时候执行：
showEcharts();
// 在线统计
function showEcharts(){
$.ajax({
type:'POST',
dataType: "json",
url: appRootPath+'/webservice/rfidPassRecord/getVehicleTypeStatisticInfo',
data:{},
success:function(data){
var date = [];
var total = [];
if(data!="NULL"){
for(i=0;i<data.length;i++){
date[i] = data[i].name; //名字
total[i] = data[i].value; //数量
}
var myChart = echarts.init(document.getElementById('showZaiXianTongJiEcharts'));
//为每个数据增加图片
var weatherIcons = {
'Bus': appRootPath + '/images/index/u202.svg',
'Taxi': appRootPath + '/images/index/taxi.png',
'Dangerous': appRootPath + '/images/index/u209.svg',
'Goods': appRootPath + '/images/index/Goods.png',
'Muck': appRootPath + '/images/index/muck.png',
'Passenger': appRootPath + '/images/index/pass.png',
'School': appRootPath + '/images/index/school.png',
'Else': appRootPath + '/images/index/else.png',
};
var seriesLabel = {
normal: {
show: true,
textBorderColor: '#333',
textBorderWidth: 2
}
}
option = {
color: ['#00C3C3'],//整体表格字体颜色设置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
//重点：这是我今天解决了半天的一个问题
原因：因为官方文档是英文，我们系统要中文。这就出现了 下方 rich 与data名字不对应 所以图片会丢失 这个formatter很好的解决了英文转换中文的问题！
formatter: function (params) {
return '' + getDay(params[0].name) + ': ' + params[0].value + '辆';
// 鼠标移上显示的文字
//1.span是小蓝点
//2.后边是显示的文字，一定要加[0](如果想知道为啥log一下看看数据console.log(params))
}
},
grid: {
left: '5%',
right: '7%',
bottom: '10%',
top: '19%',
containLabel: true
},
xAxis: {
type: 'value',
name: '辆',
axisLabel: {
formatter: '{value}'
},
axisLine:{
lineStyle:{
color:'#00C3C3',
width:2, //这里是坐标轴的宽度
}
}
},
yAxis: {
type: 'category',
inverse: true,
axisLine : {
lineStyle : {
color : '#00f0ff'
}},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color : '#00f0ff'
}
},
data: ['Bus', 'Taxi', 'Dangerous', 'Goods', 'Muck', 'Passenger', 'School', 'Else'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }';
},
margin: 10,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
Bus: {
height: 10,
align: 'center',
backgroundColor: {
image: weatherIcons.Bus
}
},
Taxi: {
height: 10,
align: 'center',
backgroundColor: {
image: weatherIcons.Taxi
}
},
Dangerous: {
height: 12,
align: 'center',
backgroundColor: {
image: weatherIcons.Dangerous
}
},
Goods: {
height: 12,
align: 'center',
backgroundColor: {
image: weatherIcons.Goods
}
},
Muck: {
height: 14,
align: 'center',
backgroundColor: {
image: weatherIcons.Muck
}
},
Passenger: {
height: 10,
align: 'center',
backgroundColor: {
image: weatherIcons.Passenger
}
},
School: {
height: 10,
align: 'center',
backgroundColor: {
image: weatherIcons.School
}
},
Else: {
height: 15,
align: 'center',
backgroundColor: {
image: weatherIcons.Else
}
}
}
}
},
series: [{
data: total,
type: 'bar',
barWidth: 12,
itemStyle: {
normal: {
//每根柱子颜色设置
color: function(params) {
let colorList = [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#91c7ae",
"#749f83",
"#ca8622",
"#bda29a",
];
return colorList[params.dataIndex];
}
}
},
label: {
show: "true",
position: "right",
color: "#FFF",
fontWeight: "bolder",
fontSize: "15"
},
}
]
};
myChart.setOption(option);
}
}
})
}
//英文转换。方法很LOW但是很好用
function getDay(name){
switch(name){
case 'Bus':
return '公交';
case 'Taxi':
return '出租';
case 'Dangerous':
return '危化';
case 'Goods':
return '危货';
case 'Muck':
return '渣土';
case 'Passenger':
return '客运';
case 'School':
return '校车';
case 'Else':
return '其他';
}
}