echart 实现地图坐标轴带图标

需要实现设计图的效果

  // 排名图drawColumbar () {var icon = {frist: require('@/assets/images/icon/1.png'),second: require('@/assets/images/icon/2.png'),thrid: require('@/assets/images/icon/3.png')}let columchart = echarts.init(this.$refs.columbarchart)let columchart1 = echarts.init(this.$refs.columbarchart1)let datalist = this.ElectricDaylist// datalist.push({//   customerName:'测试室',//   eday:0.4// })let xdata = []let ydata = []for (let i = 0; i < (datalist.length > 10 ? 10 : datalist.length); i++) {let name = datalist[i].customerName.length > 6 ? datalist[i].customerName.substr(0, 6) + '…' : datalist[i].customerNamexdata.unshift(name)ydata.unshift((datalist[i].eday ? datalist[i].eday : 0).toFixed(2))}// debugger// 无数据时增加提示if (ydata.length === 0 || ydata.every(v => Number(v) === 0)) {dl(this.$refs.colbox1, true, this.$t('common.noData'))dl(this.$refs.colbox2, true, this.$t('common.noData'))} else {dl(this.$refs.colbox1, false, this.$t('common.noData'))dl(this.$refs.colbox2, false, this.$t('common.noData'))}let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01],splitLine: {show: false}},yAxis: {axisLine: {show: false},axisTick: {show: false},position: 'left',type: 'category',data: xdata,axisLabel: {   //最主要的核心代码formatter: function (value, index) {console.log(value, index, "index")let icon = (index == (xdata.length - 1) ? 'First' : index == (xdata.length - 2) ? 'Second' : index == (xdata.length - 3) ? 'Thrid' : 'Other')if (icon == 'Other') {return '{' + icon + '|' + (xdata.length - index) + ' }' + value + '';}return '{' + icon + '| }{value|' + value + '}';},margin: 20,rich: {First: {height: 20,align: 'center',backgroundColor: {image: icon.frist}},Second: {height: 20,align: 'center',backgroundColor: {image: icon.second}},Thrid: {height: 20,align: 'center',backgroundColor: {image: icon.thrid}},Other: {height: 20,align: 'center',color: '#fff',width: 20,opacity: '1',backgroundColor: '#333e60',borderRadius: 50},}},splitLine: {lineStyle: {color: '#2e2f32'}}},series: [{// ydata,name: '发电量',type: 'bar',data: ydata,barMaxWidth: '10px',itemStyle: {color: new echarts.graphic.LinearGradient(1, 0, 0, 0,[{ offset: 0, color: 'rgba(0,132,255,1)' },{ offset: 1, color: 'rgba(151,151,151,0.01)' }]),barBorderRadius: [5, 5, 0, 0]}}],textStyle: {color: global.globalState == 'black' ? '#FFFFFF' : '#2e2f32',fontSize: 10}}columchart.setOption(option, true)columchart1.setOption(option, true)},

echart 实现地图坐标轴带图标相关推荐

react+百度地图实现自定义图标
开发环境 1.react 2.百度地图使用的是:rc-bmap 实现效果实现图中提示框的效果. 看到这个,用过百度地图的第一个会想到marker,其实不是,用的是Label,其实难点不在这,这个看看 ...
Android 自带图标库 android.R.drawable
在xml文件中调用. android:title="@string/secure_connect" android:orderInCategory="100" ...
使用pipenv建立虚拟环境解决python打包exe文件过大的问题（附打包带图标，多个py文件打包exe）
我们编写的程序可以发给其他小伙伴使用,但是其他小伙伴不一定安装有python.这时候就需要用到打包啦.打包可以将程序打包成exe文件.然后小伙伴在windows平台里就可以运行(无需python).直 ...
【MFC】带图标的工具栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述默认情况下,MFC中提 ...
Android UI之ImageButton(带图标的按钮)
除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首先要在布局文件中定义ImageButton,然后通过setImageDrawable ...
百度步行导航加poi搜索android,【百度地图】带地图显示控件、导航控件、POI查找控件...
标题: [完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件概述: 源代码主要包含三个项目,BMap.NET.BMap.NET.Windows ...
Android 自定义带图标Toast，工具方法，Toast自定义显示时间
带图标Toast工具方法1 样式 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:an ...
android 按钮带图标阴影_android中带图标的按钮(ImageButton)怎么用
展开全部除了Android系统自带的Button按钮以外,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首先要在布局62616964757a686964616fe58685e5ae ...
【传】玩转Android---UI篇---ImageButton(带图标的按钮)
原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...

echart 实现地图坐标轴带图标

echart 实现地图坐标轴带图标相关推荐

最新文章

热门文章