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 '其他';
}
}

echarts.js刻度标签实现富文本实现中文+图片的效果解决方法相关推荐

froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
echarts柱状图x轴文字换行_ECharts xAxis配置坐标轴刻度标签的富文本样式
xAxis.axisLabel.rich | Object 在 rich 里面,可以自定义富文本样式.利用富文本样式,可以在标签中做出非常丰富的效果. 例如:label: { normal: ...
JS编写自己的富文本编辑器
富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...
JS修改标签中的文本且不影响其中标签
/********************************************************************** JS修改标签中的文本且不影响其中标签* 说明:* 需要修 ...
使用UIWebView中html标签显示富文本
使用UIWebView中html标签显示富文本用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...

echarts.js刻度标签实现富文本实现中文+图片的效果解决方法

echarts.js刻度标签实现富文本实现中文+图片的效果解决方法相关推荐

最新文章

热门文章