echarts的symbol使用本地图片

import aj1 from '@/assets/img/aj1.png';
import aj2 from '@/assets/img/aj2.png';
var img = {
     a: aj1,
      b: aj2,
 }
var value = 1; // >0

            //生成
            let option= {
                  grid: {
                    left: "0%",
                    top: "0%",
                    bottom: "0%",
                    right: "0%",
                    containLabel: true
                },
                tooltip: {
                    trigger: "item",
                },
                xAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [{
                    type: "category",
                    inverse: false,
                    data: ["城区A", "城区B", "城区C", "城区D", "城区E"],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#3e86dd"
                        }
                    },
                    axisLabel: {
                        margin: 35,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        }

                    }
                }

                ],
                series: [

                    {
                        tooltip: {
                            show: false
                        },
                        z: 4,
                        type: "pictorialBar",
                        symbolSize: ['30', '30'],
                        symbolRepeat: "fixed",
                        data: [{
                            value: value,
                            symbol: 'image://' + img.b,
                        },
                            {
                                value: value,
                                symbol: 'image://' + img.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img.b,
                            }
                        ]
                    },
                    {
                        z: 6,
                        type: "pictorialBar",


                        symbolSize: ['30', '30'],

                        animation: true,
                        symbolRepeat: "fixed",
                        symbolClip: true,
                        symbolPosition: "start",
                        symbolOffset: [0, 0],
                        data:  [{
                            value: 60,
                            symbol: 'image://' + img.a,
                        },
                            {
                                value: 85,
                                symbol: 'image://' + img.a,
                            },
                            {
                                value: 105,
                                symbol: 'image://' + img.a,
                            },
                            {
                                value: 130,
                                symbol: 'image://' + img.a,
                            },
                            {
                                value: 185,
                                symbol: 'image://' + img.a,
                            }
                        ],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#18fcff',
                                    fontSize: 14,

                                },
                                position: "right",
                                offset: [35, 0]

                            }
                        },
                    },
                    {
                        type: "bar"
                    },

                ]
            }

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用EChartsimage标记来插入图片作为symbol。首先需要在option中定义一个image数组,然后在series中使用symbol: 'image',并指定image的索引即可。例如: option = { ... series: [{ type: 'scatter', symbol: 'image', symbolSize: 50, data: [ [10, 20, ], [20, 30, 1], [30, 40, 2] ], itemStyle: { normal: { color: '#F00' } }, // 定义image数组 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 image: [ { // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 id: , // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值