echarts柱状堆叠图使用引入图标代替
效果图:
代码:
<template>
<div refs="testchart"></div>
</template>
<script>
// 方式1.引入图片
import yellowlike from './yellowlike .png'
import greenlike from './greenlike .png'
export default {
data() {
return {
yellowlike ,
greenlike
}
},
methods: {
drawright() {
let mychart = echarts.init(this.$refs.testchart);
// 方式2.转换成base64格式
const yellowlike = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAABmJLR0QA/wD/AP+gvaeTAAABYklEQVRIibWSzytEYRSGn/e7FLFkIUtlZWGj2GkmWdlozMJWyl8h/BNTNvYYTWg2xs4CiewkWSqKDEWMe4/FEGN+XjP3rL5zzvs95+10IGRYOr5t6didpeNz9bQKB57sg4+br9THNKJE7qya3oWBI3/gV+aB1XQfDh4Ew6XDbKh1cGn2T97bErhtxWLAWGmRfNNwWx/vxpSq0HpoCm7rMx6etwYMVmif/xtuhnD3KSBRUSAd1/ov25iI4+znxMzeCJRRMpe3zdgq0nyN/4ug23JqUMBTtg0X7AIdPw3AC5aAZdBoLWfAClh51QQfduFAr+WT1VUH2kCo34E9Ng+qGNeu3q3+P3TpcETk3I4cFhFcOnIokrW809556iAS54ea2nlxmCKAaw8gmrWY/wUPWg5/JOg5KcJbf4r7Sm74Rbiv6s5lT+HZWvt+OZx/BTyXCuyuqGtbAA6AQoPkDNO57HfyCTjZcPNTwPDNAAAAAElFTkSuQmCC"
const greenlike = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAABmJLR0QA/wD/AP+gvaeTAAABhklEQVRIibWSsWoUURSGv//sKoJiZyEpA4LRwkIhtvoGstPYrhHxDWxEfYnAwpoHGISgkkbsLEwIisVGkWApaCGJionZ3fktTCSOu2MmO3Oqe+75/++eeziiZLR7yWPkWaM7D2fSbpFWZcA3166dHhIfd9Mh9qXuuUevx+mjDHzgxvS+tGGpXaQvBVdwIWc+Xxkc+/pfKZyqBH6jl1wBLueuNyeG3+4lJ6xsfkTpy0TwxEljO7wAOpOvSbwp8jYLyUYn33oeaI2sZ6wU2dXuta4q9GfFTPazcTQWO9PpZnut1QHmxprhLtKnfx91n+zIUhPx1Pax/ZbBju8B9wWzLvwYD/AIhcDRfxfAVr4W9vEC5oFCYiqAjUlBY+gfgv/s6uHD72vrXLAcoFrgWablANcxlp3m1varANfQuV52Lj75EXIdY/EzgLCqH0vmXTiufBU3vs/EKkAoKh6L9TxVOgQIZ+M7t/W1NFws7B0DZevAtxz082/h4BbwAugfkLzYPZsu7WW/AKSMiLabhbAhAAAAAElFTkSuQmCC"
var maxData = 2000;
let option = {
tooltip: {},
xAxis: {
// max: maxData,
axisLabel: {show:false},
splitLine: { show: false },
},
yAxis: {
data: ['2013', '2014', '2015', '2016','2017'],
inverse: false,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show:false }
},
grid: {
top: 'center',
height: 600,
left: 70,
right: 100
},
series: [
{
// green data
type: 'pictorialBar',
stack: 'total',
// 方式1.import图片
// symbol: "image://" + this.yellowlike,
// 方式2.base64格式
symbol: yellowlike,
symbolRepeat: 'fixed',
symbolMargin: '20%',
symbolClip: true,
symbolSize: 30,
symbolBoundingData: maxData,
data: [891, 1220, 660, 1670,688],
markLine: {
symbol: 'none',
label: {
formatter: 'max: {c}',
position: 'start'
},
lineStyle: {
color: 'green',
type: 'dotted',
opacity: 0,
width: 2
},
data: [
{
type: 'max'
}
]
},
z: 10
},
{
// yellow data
type: 'pictorialBar',
stack: 'total',
// 方式1.import图片
// symbol: "image://" + this.greenlike,
// 方式2.base64格式
symbol: greenlike,
symbolRepeat: 'fixed',
symbolMargin: '20%',
symbolClip: true,
symbolSize: 30,
symbolBoundingData: maxData,
data: [891, 122, 66, 160,765],
markLine: {
symbol: 'none',
label: {
formatter: 'max: {c}',
position: 'start'
},
lineStyle: {
color: 'green',
type: 'dotted',
opacity: 0,
width: 2
},
data: [
{
type: 'max'
}
]
},
z: 10
},
]
};
mychart.setOption(option);
},
}
}
</script>
注意事项:需将网络图片转换为base64格式,转换地址为:图片base64转换
如果不想对图片进行base64转换则import pic from './pic.png’图片,之后data = “image://” + this.pic也可以。
思路参考:官网柱状堆叠图柱状堆叠图以及精灵图精灵图标