Echarts图的图例为自定义图片

组件

<template><divref="vehicleChart":class="className":style="{ height: height, width: width, margin: margin }"/>
</template>
<script>
export default {name: 'EntryVehicleChart',components: {},props: {className: {type: String,default: 'chart'},margin: {type: String,default: '0px'},width: {type: String,default: '100%'},height: {type: String,default: '200px'},vehicleData: {type: Array,required: true}},data() {return {chart: null}},watch: {vehicleData: {deep: true,handler(val) {this.setOptions(val)}}},mounted() {console.log(this.vehicleData)this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.vehicleChart, 'macarons')this.setOptions(this.vehicleData)},// 车流量setOptions(vehicleData) {const objData = array2obj(vehicleData, 'name')this.chart.setOption({backgroundColor: '#0E1233',title: {text: '入区车辆占比',textStyle: {color: '#fff',fontSize: 14},top: 'center',left: '20%'},legend: [{selectedMode: false,orient: 'vertical',align: 'left',right: '2%',top: 'center',data: vehicleData,formatter: function(name) {return `{title|${name}}{value|${objData[name].value}}{unit|辆}`},textStyle: {rich: {title: {fontSize: 14,width: 60,padding: [0, 0, 0, 0],color: '#959ABB',align: 'left'},value: {width: 36,color: '#fff',fontSize: 14,padding: [0, 0, 0, 14],align: 'right'},unit: {color: '#fff',fontSize: 14,padding: [0, 0, 0, 8],align: 'right'}}}}],series: [{type: 'pie',radius: ['45%', '60%'],center: ['30%', '50%'],data: vehicleData,hoverAnimation: false,label: {normal: {formatter: '{d}%',color: '#FFF'}},itemStyle: {normal: {color: function(params) {switch (params.name) {case '小客车':return '#25D450'case '大客车':return '#E3C810'case '货车':return '#1274EE'case '危化车':return '#F43D1F'case '其它车型':return '#ee8b12'}}}}}]})}}
}
</script>

使用

 <entry-vehicle-chart :vehicle-data="vehicleData" /><script>import { EntryVehicleChart} from '@/components/echarts'export default {components: {EntryVehicleChart,},data() {return {vehicleData: []}}methods:{getInRestData() {this.$http({url: this.$http.adornUrl('/v2/car/province/inRestArea'),method: 'get',params: this.$http.adornParams({cityId: localStorage.getItem('cityId') || '',companyId: localStorage.getItem('companyId') || ''})}).then(({ data }) => {if (data.data && data.code === 0) {  this.vehicleData = data.data.countGroupByCarTypethis.vehicleData.map(item => {let url//注意：icon的路径必须前面加上 'image://'switch (item.name) {case '小客车':url = 'image://' + require('@/assets/png/mini.png')breakcase '大客车': url = 'image://' + require('@/assets/png/coach.png')breakcase '货车': url = 'image://' + require('@/assets/png/truck.png')breakcase '危化车': url = 'image://' + require('@/assets/png/danger.png')breakcase '其它车型': url = 'image://' + require('@/assets/png/others.png')break}this.$set(item, 'icon', url)})}})},}}</script>

Echarts图的图例为自定义图片相关推荐

echarts之legend-改变图例的图标为自定义图片
legend是echarts中的图例名称类型默认值可选值效果 data Array [] 图例内容数组,数组项通常为{string},每一项代表一个系列的name,默认布局到达边缘会自动分行 ...
echarts旭日图添加图例
echarts官网中的示例如下,我们只能看到一个visualMap的属性中加了inRange,便可以出来一个渐变色的图例但往往业务需求要的图例是这种格式的先贴一个实现的效果图,铛铛啷挡~~ 实现这 ...
echarts中自定义图片的矢量路径设置
echarts中自定义图片的矢量路径设置在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 第一步 ...
echarts中自定义图片的矢量路径
在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 我们可以去阿里巴巴矢量图标库找到自己想要的图标, ...
java 后端使用 Graphics2D 制作海报，画echarts图，带工具类，各种细节：如头像切割成圆形，文字换行算法（完美实验success），解决画上文字、图片后不清晰问题
文章目录先看成品前言一.项目目录结构一.海报制作PosterUtil.java工具类 1. 描述 2. 代码二.测试生成海报 1. 描述 2. 直接上代码四.其他测试 1. Test1_C ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...
Matplotlib自定义图例（多张独立图共享图例）
1.应用场景可视化不同方法在各种超参数(或者不同数据集)的性能时,若用多个子图形式可视化,则图太小啦:若每个子图弄成单独的figure,则每个张图都有一个图例显得非常冗余,如图1所示. 图1 每张图 ...
PPT 图保存为高清图片（可自定义分辨率）
PPT 图保存为高清图片(可自定义分辨率) 推荐网站: https://blog.csdn.net/qxm_smile/article/details/105922631
《前端》echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景--什么鬼待处理
echarts排行榜,类目名字在柱子上方全部显示,前三名序号使用自定义图片背景https://blog.csdn.net/orangeverity/article/details/107160849 ...
安卓实现Banner轮播图自定义图片（非网络图片）
需要一个轮播图,研究了一下,github上最好的就是这个banner了. 首先,在build.gradle中添加依赖: implementation 'com.youth.banner:banner: ...

Echarts图的图例为自定义图片

组件

使用

Echarts图的图例为自定义图片相关推荐

最新文章

热门文章