Vue+iview在Modal中使用 ECharts 柱状图（二）

最新推荐文章于 2021-07-02 09:23:13 发布

氵冫、

最新推荐文章于 2021-07-02 09:23:13 发布

阅读量740

点赞数

分类专栏：前端 # Vue+Iview

本文链接：https://blog.csdn.net/qq_39515385/article/details/102888224

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue+Iview

7 篇文章 0 订阅

订阅专栏

Vue+iview在Modal中使用 ECharts 柱状图（二）

针对项目需求解决ECharts的不足点：
柱条对应数据量差距太大，使得数据量低的柱条点击不方便

loadCharts() {
    let myChart = E.init(this.$refs.chart);
    myChart.setOption({
        color: ["#3398DB"],
        tooltip: {                  // 坐标轴指示器，坐标轴触发有效
            trigger: "axis",
            axisPointer: {
                type: "shadow"      // 默认是直线line，更改为阴影
            }
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: this.xAxisName,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: "45"
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            }
        ],
        series: [
            {
                name: "数量",
                type: "bar",
                barWidth: "10",
                data: this.serCount,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: "top"
                        }
                    }
                }
            }
        ]
    });
    // 非图标区可点击事件
    myChart.getZr().on("click", params => {
        const pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
            let xIndex = myChart.convertFromPixel(
                { seriesIndex: 0 }, [params.offsetX, params.offsetY]
            )[0];
            xIndex = Math.abs(xIndex);
            let count = myChart.getOption().series[0].data[xIndex];

            if (count != 0) {
                let item = JSON.parse(this.tempReport.tabs);
                let name = myChart.getOption().xAxis[0].data[xIndex];
                this.elseContent = null;
                $.each(item, (i, d) => {
                    if (name == d.name) this.elseContent = d.data;
                });
                this.elseTitle = name;
                this.echartShow = false;
                this.elseShow = true;
            }
        }
    });
}