echarts的symbol使用本地图片

最新推荐文章于 2024-07-02 16:09:07 发布

coldriversnow

最新推荐文章于 2024-07-02 16:09:07 发布

阅读量4k

点赞数 4

文章标签： ECharts 图像条形图可视化城区分布数据展示

本文链接：https://blog.csdn.net/coldriversnow/article/details/123289870

版权

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"
                    },

                ]
            }