一、在项目中要求实现如下所示:
我首先想到的是icon图标,但官网只允许设置为:
ECharts 提供的标记类型包括 :'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
所以icon引入无法成功。
可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
URL 为图片链接例如:
'image://http://xxx.xxx.xxx/a/b.png'
我在legend中这样修改,在此附上关键部分代码:
legend: {
show: true,
data: [{ name: '男性', icon: `image://${require('@/assets/images/man.png')}`},{ name: '女性', icon: 'icon-nv',icon: `image://${require('@/assets/images/nv.png')}`}],
这里@需要自己设置:在vue.config.js配置
const path = require('path')
const resolve=dir=>path.join(__dirname,dir)
module.exports={baseUrl:'./',runtimeCompiler:true,chainWebpack:config=>{config.resolve.alias.set('@',resolve('src'))}}
在tsconfig.json文件中进行解释