echarts 柱状图点击事件

已于 2024-06-12 11:09:58 修改
阅读量5.1k 收藏 2
点赞数
分类专栏： echarts 文章标签： echarts 前端
于 2022-04-24 16:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42120669/article/details/124386780
版权

目录

 组件：

页面引用：

 组件：

<template>
    <div>
        <div
            @click="onclick"
            ref="echartsbar"
            :style="{ width: width, height: height }"
        ></div>
    </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");

export default {
    name: "comBarxy",
    props: {
        bardatanum: {
            type: Object,
            default: () => {
                return {};
            },
        },
        height: {
            type: String,
            default: "100%",
        },
        width: {
            type: String,
            default: "100%",
        },
    },
    watch: {
        bardatanum: {
            //深度监听，可监听到对象、数组的变化
            handler(newV, oldV) {
                // do something, 可使用this
                // console.log(newV, oldV)

                // console.log(newV, 'newV')
                var that = this;
                if (newV.datax || newV.datay) {
                    setTimeout(function () {
                        that.barCharts();
                    }, 500);
                }
            },
            deep: true,
            immediate: true, // 该回调将会在侦听开始之后被立即调用
        },
    },
    data() {
        return {
            xData: {},
            xDataName: {},
            chickechartsId: 0,
            echartsId: 0,
            echartsHierarchy: "",
            echartsName: "",
            ai: 0,
            timer: null,
            option: {
                // legend: {},
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                dataZoom: [
                    {
                        type: "inside", //inside slider
                        realtime: true,
                        // handleSize: "100%", //滑动条两侧的大小
                        start: 0,
                        end: 100,
                    },
                ],

                grid: {},
                xAxis: [
                    {
                        type: "category",
                        data: [],
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#d8dadd",
                            },
                        },
                        axisTick: {
                            show: false, //隐藏X轴刻度
                            lineStyle: {
                                color: "#d8dadd",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#737373", //X轴文字颜色
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#ededed", //网格线的颜色
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#545151",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: " ",
                        position: "right",
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "数量",
                        type: "bar",
                        barWidth: 0,
                        itemStyle: {
                            color: "#5087ec",
                        },
                        data: [],
                    },
                ],
            },
        };
    },

    methods: {
        barCharts() {
            let that = this;
            // 基于准备好的dom，初始化echarts实例

            // if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
            //     this.myChart.dispose() //销毁
            //     this.myChart.clear()
            // }
            let myChart = echarts.init(this.$refs.echartsbar);

            // myChart.setOption(this.option)
            // this.myChart = myChart
            // let option = this.option

            if (this.bardatanum.formatterAddName) {
                this.bardatanum.formatterAddName =
                    this.bardatanum.formatterAddName;
            } else {
                this.bardatanum.formatterAddName = " ";
            }
            let paramAdd = this.bardatanum.formatterAddName;
            if (this.bardatanum.type == 0) {
                this.option.series[0].data = [];
                this.option.grid = this.bardatanum.grid;
                this.option.dataZoom = this.bardatanum.dataZoom;
                this.option.xAxis[0].data = this.bardatanum.datax;
                // this.option.xAxis[0].type='category'

                this.option.series[0].data = this.bardatanum.datay;
                this.option.series[0].barWidth = this.bardatanum.barWidth;
                this.option.series[0].itemStyle.color =
                    this.bardatanum.barColor;
                // this.option.tooltip = {
                //     formatter: function (params) {
                //         return (
                //             params.name +
                //             paramAdd +
                //             "<br/>" +
                //             params.marker +
                //             params.value
                //         );
                //     },

                // };
                // console.log("柱状图：", this.option);
                myChart.setOption(this.option);
            } else if (this.bardatanum.type == 1) {
                this.option.series = [];
                myChart.setOption({
                    grid: this.bardatanum.grid,
                    xAxis: {
                        type: "value",
                    },
                    yAxis: {
                        type: "category",
                        data: this.bardatanum.datax,
                    },
                    series: {
                        data: this.bardatanum.datay,
                        // barWidth:this.bardatanum.barWidth,
                        // color:this.bardatanum.barColor,
                    },
                    // tooltip: {
                    //     formatter: function (params) {
                    //         return (
                    //             params[0].name +
                    //             "<br/>" +
                    //             params[0].marker +
                    //             params[0].value +
                    //             "人"
                    //         );
                    //     },
                    // },
                });
            } else if (this.bardatanum.type == 2) {
                this.option.series = [];
                myChart.setOption({
                    grid: this.bardatanum.grid,
                    xAxis: {
                        data: this.bardatanum.datax,
                        type: "category",
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: this.bardatanum.datay,
                    toolbox: {
                        show: true,
                    },
                    // legend: {
                    //     data: this.bardatanum.legenddata,
                    // },
                    tooltip: {
                        trigger: "axis",
                        formatter: function (params) {
                            //数据单位格式化
                            var relVal =
                                params[0].name +
                                this.bardatanum.formatterAddName; //x轴名称
                            relVal += "<div style='width:140px'>";
                            for (var i = 0, l = params.length; i < l; i++) {
                                if (params[i].value) {
                                    // relVal +=
                                    //     "<span  style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                                    //     params[i].color +
                                    //     ";'>" +
                                    //     '<span  style="display:block;padding-left:15px;margin-top:-4px">' +
                                    //     params[i].seriesName +
                                    //     " : " +
                                    //     params[i].value +
                                    //     "个" +
                                    //     "</span>" +
                                    //     "</span>" +
                                    //     "<br>";
                                    relVal +=
                                        "<span  style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                                        params[i].color +
                                        ";'>" +
                                        '<span  style="display:block;padding-left:15px;margin-top:-4px">' +
                                        params[i].seriesName +
                                        " : " +
                                        '<span style="font-weight:700;">' +
                                        params[i].value +
                                        "</span>" +
                                        "  个" +
                                        "</span>" +
                                        "</span>" +
                                        "<br>";
                                }
                            }
                            relVal += "</div>";
                            return relVal;
                        },
                    },
                });
            } else {
                let dataYseries = [];
                console.log(this.bardatanum);
                for (let i = 0; i < this.bardatanum.datay.length; i++) {
                    dataYseries.push({
                        name: this.bardatanum.datay[i].name,
                        type: this.bardatanum.typeval,
                        data: this.bardatanum.datay[i].data,
                        barWidth: this.bardatanum.barWidth,
                        itemStyle: {
                            color: this.bardatanum.barColor[i],
                        },
                    });
                }
                if (this.bardatanum.barlinetype) {
                    for (let i = 0; i < this.bardatanum.datayline.length; i++) {
                        dataYseries.push({
                            name: this.bardatanum.datayline[i].name,
                            type: this.bardatanum.typeline,
                            yAxisIndex: 1,
                            data: this.bardatanum.datayline[i].data,
                            barWidth: this.bardatanum.barWidth,
                            itemStyle: {
                                color: this.bardatanum.barColorLine[i],
                            },
                        });
                    }
                }
                

                let opyAxisarry = [
                    {
                        type: "value",
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#ededed", //网格线的颜色
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#545151",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: " ",
                        position: "right",
                        splitLine: {
                            show: false,
                        },
                    },
                ];

                this.option.legend = { data: this.bardatanum.legenddata };
                this.option.grid = this.bardatanum.grid;
                this.option.dataZoom = this.bardatanum.dataZoom;
                this.option.xAxis[0].data = this.bardatanum.datax;
                // this.option.xAxis[0].type='category'
                this.option.series = dataYseries;
                this.option.yAxis = opyAxisarry;
                console.log("多个柱状图：", this.option);
                myChart.setOption(this.option);
            }
            // myChart.clear()
            //  myChart.setOption(this.option,true)
            // 阴影部分点击事件（有阴影点击可以去掉柱子点击）
            myChart.getZr().off("click");
            myChart.getZr().on("click", function (params) {
                var pointInPixel = [params.offsetX, params.offsetY];
                // 使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，好比X、Y轴lable、空白位置等的点击事件。
                if (myChart.containPixel("grid", pointInPixel)) {
                    var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
                        params.offsetX,
                        params.offsetY,
                    ])[0];
                    let op = myChart.getOption();
                    // 获取当前点击位置要的数据
                    this.xData = op.series[0].data[xIndex];
                    this.xDataName = op.xAxis[0].data[xIndex];
                }

                this.echartsId = this.xData.id;
                this.echartsName = this.xDataName;
                this.echartsHierarchy = this.xData.level;

                this.chickechartsId = {
                    echartsId: this.echartsId,
                    echartsName: this.echartsName,
                    echartsHierarchy: this.echartsHierarchy,
                };
                that.$emit("onclick", this.chickechartsId);
            });
            /*  //柱状图点击事件 此点击事件有问题 会多次触发点击
            myChart.on("click", function (params) {

                this.echartsId = params.data.id;
                this.echartsName = params.name;
                this.echartsHierarchy = params.data.level;
                 this.chickechartsId = {
                    echartsId: this.echartsId,
                    echartsName: this.echartsName,
                    echartsHierarchy: this.echartsHierarchy,
                }
                 that.$emit("onclick", this.chickechartsId);
            });
            */

            /*     //   建议使用这种方式
            myChart.off("click").on("click", function (params) {
                this.echartsId = params.data.id;
                this.echartsName = params.name;
                this.echartsHierarchy = params.data.level;
                this.chickechartsId = {
                    echartsId: this.echartsId,
                    echartsName: this.echartsName,
                    echartsHierarchy: this.echartsHierarchy,
                };
                _this.$emit("onclick", this.chickechartsId);
            }); */
            // this.chickechartsId = myChart;

            if (this.bardatanum.datax.length > 0) {
                this.autoFnpie(this.bardatanum.datax.length, myChart);
            }
            // this.autoFnpie(this.bardatanum.datax.length, myChart)
        },
        onclick() {
            // console.log("2子组件id：",this.params)
            // console.log("获取点击id：",this.chickechartsId)
            // this.$emit("onclick", this.chickechartsId);
            // this.echartsId = undefined
            // this.echartsName = undefined
            // this.echartsHierarchy = undefined
        },
        // 图形自定义展示
        autoFnpie(leng, myChart) {
            var that = this;
            //轮播效果
            var currentIndex = -1;
            var dataLen = leng;

            that.timer = setInterval(() => {
                //  计时器增加
                that.ai++;

                if (that.ai == dataLen) {
                    that.ai = 1;
                }
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: currentIndex,
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: currentIndex,
                });
                // 显示 tooltip
                myChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: currentIndex,
                });
            }, 5000);
        },
    },
};
</script>

<style>
</style>

页面引用：

<template>
    <div class="all-box">
        <div>
            <!-- 上面的echarts -->
            <div></div>
            <!-- 中间的echarts -->
            <div>
                <div class="topfirst-echarts-box">
                    <div
                        class="jzgzryxbtj"
                        :style="{ width: '32%', height: zztechatsheight }"
                    >
                        <comBarxy
                            @onclick="onclickResidenceStaffAge"
                            :bardatanum="ResidenceStaffAge"
                            :style="{ width: '100%', height: '89%' }"
                        ></comBarxy>
                    </div>
                    <div
                        class="gxqjzrytj"
                        :style="{ width: '68%', height: zztechatsheight }"
                    >
                        <comBarxy
                            :bardatanum="JurisdictionsHost"
                            :style="{ width: '100%', height: '89%' }"
                        ></comBarxy>
                    </div>
                </div>
            </div>
            <!-- 底下的echarts -->
            <div>
                <div class="topfirst-echarts-box">
                    <div
                        class="jzgzrynldtj"
                        :style="{ width: '100%', height: zztechatsheight }"
                    >
                        <comBarxy
                            @onclick="onclickresidentCommute"
                            :bardatanum="residentCommute"
                            :style="{ width: '100%', height: '89%' }"
                        ></comBarxy>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comBarxy from "../../components/commEcharts/comBarxy.vue";
export default {
    name: "gyyqfy",
    components: { comBarxy },
    data() {
        return {
            // 定义1为本页面，2为更多数据跳转，3为居民通勤地统计跳转. 4为防疫工作台
            MoreDataworkbench: 1,
            nowDate: "", // 当前日期
            streetList: [], //街道数据
            villageList: [], //村、居委
            villageVal: undefined,
            paramsSelect: {
                XJZDSQJCWH: "",
                XJZDXZJD: "",
            },
            url: {
                postStreetVillageUrl: "/dsc/metadata/data/streetVillage",
            },
            NumdataTop: [
                {
                    text: "现有XXXXXXXXXX人员",
                    num: "20",
                    color: "linear-gradient(106deg, #F92E2E, #FF5D3D)",
                },
                {
                    text: "现有XXXXXXXXXX人员",
                    num: "10000",
                    color: "linear-gradient(106deg, #FF6D29, #FECC44)",
                },
                {
                    text: "现有XXXXXXXXXX人员总数",
                    num: "160",
                    color: "linear-gradient(106deg, #148BFB, #1DC7FF)",
                },
                {
                    text: "现有次XXXXXXXXXX人员总数",
                    num: "220",
                    color: "linear-gradient(106deg, #1ABADC, #3ADFF2)",
                },
            ],
            zztechatsheight: "400px",

            // 居住/工作人员年龄
            ResidenceStaffAge: {
                formatterAddName: " 岁",
                datax: [],
                datay: [],
                type: 0,
                barWidth: 26,
                barColor: "#35C493",
                grid: {
                    right: "50px",
                    // left: '15%',
                    top: "10%",
                    bottom: "15%",
                },
            },

            // 各辖区居住人员统计
            JurisdictionsHost: {
                formatterAddName: "",
                datax: [],
                datay: [],
                type: 0,
                barWidth: 26,
                barColor: "#6395F9",
                grid: {
                    right: "3%",
                    // left: '15%',
                    top: "10%",
                    bottom: "15%",
                },
            },
            // 各辖区人员数据统计
            residentCommute: {
                formatterAddName: "",
                legenddata: [
                    "检测XXXXXXXXXX",
                    "检测XXXXXXXXXX关联",
                    "检测XXXXXXXXXX次关联",
                ],
                datax: [],
                datay: [],
                datayline: [],
                type: 3,
                barlinetype: true,
                typeline: "line",
                typeval: "bar",
                barWidth: 15,
                barColor: [
                    "#F86565",
                    "#FCB04E",
                    "#74CBED",
                    "#6D9DF6",
                    "#40BDE6",
                    "#F09615",
                    "#0079E6",
                ],
                barColorLine: ["#25B0E6"],
                grid: {
                    left: "5%",
                    right: "5%",
                    top: "10%",
                    bottom: "25%",
                },
                dataZoom: [
                    {
                        type: "slider", //inside slider
                        realtime: true,
                        // handleSize: "100%", //滑动条两侧的大小
                        start: 0,
                        end: 50,
                        bottom: 30, //居下的距离
                    },
                ],
            },
            chickEcharts: {
                id: 0,
                name: "",
            },
        };
    },
    mounted() {
        this.ResidencesAge();
        this.getJurisdictionsHost();
        this.getResidentCommute();
    },
    created() {},
    methods: {
        //居住/工作人员年龄
        ResidencesAge() {
            // 绘制图表
            let xgydata = [
                "0-10",
                "11-20",
                "21-30",
                "31-40",
                "41-50",
                "51-60",
                "61-70",
                "71-80",
                "80以上",
            ];
            let datadata = [
                { value: 58026, id: 1 },
                { value: 48124, id: 2 },
                { value: 57987, id: 3 },
                { value: 120296, id: 4 },
                { value: 86562, id: 5 },
                { value: 85795, id: 6 },
                { value: 52397, id: 7 },
                { value: 23385, id: 8 },
                { value: 4842, id: 9 },
            ];

            this.ResidenceStaffAge.datax = xgydata;
            this.ResidenceStaffAge.datay = datadata;
        },
        onclickResidenceStaffAge(val) {
            console.log("工作人员年龄id:", val.echartsId);
        },

        //各辖区居住人员统计
        getJurisdictionsHost() {
            // 绘制图表
            let xgydata = [
                "银河北路街道",
                "爱民东道街道",
                "解放道街道",
                "新开路街道",
                "新源道街道",
                "南尖塔镇",
                "万庄镇",
                "九州镇",
                "白家务",
                "北旺镇",
                "新世纪步行街管委会",
                "经开区",
            ];
            let datadata = [
                27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625,
                2004, 50059, 41625,
            ];

            this.JurisdictionsHost.datax = xgydata;
            this.JurisdictionsHost.datay = datadata;
        },
        // 各辖区人员数据统计
        getResidentCommute() {
            // 绘制图表
            let xgydata = [
                "廊坊市安次区",
                "廊坊市经开区",
                "北京市大兴区",
                "天津市武清区",
                "廊坊市永清县",
                "北京市朝阳区",
                "北京市通州区",
                "北京市海淀区",
                "北京市丰台区",
                "廊坊市固安区",
                "新世纪步行街管委会",
                "经开区",
            ];
            // let datadata = [27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625, 2004, 50059, 41625]
            let datadata = [
                {
                    name: "检测XXXXXXXXXX",
                    data: [
                        563, 826, 50, 535, 750, 141, 680, 726, 625, 204, 559,
                        625,
                    ],
                },
                {
                    name: "检测XXXXXXXXXX关联",
                    data: [
                        763, 626, 510, 755, 807, 731, 280, 126, 425, 204, 505,
                        465,
                    ],
                },
                //  {
                //   name:"XXXXXXXXXX",
                //   data:[563, 636, 850, 835, 977, 931, 380, 106, 525, 284, 605, 365]
                // },
                // {
                //     name: '检测XXXXXXXXXX次关联',
                //     data: [783, 666, 610, 855, 577, 331, 580, 236, 425, 504, 235, 235],
                // },
            ];
            let datadataline = [
                {
                    name: "检测XXXXXXXXXX次关联",
                    data: [
                        1783, 6626, 6110, 1855, 577, 331, 580, 236, 425, 504,
                        235, 235,
                    ],
                },
            ];
            this.residentCommute.datax = xgydata;
            this.residentCommute.datay = datadata;
            this.residentCommute.datayline = datadataline;
        },
        onclickresidentCommute(val) {
            this.MoreDataworkbench = 3;
            this.chickEcharts.id = val.echartsId;
            this.chickEcharts.name = val.echartsName;
            console.log("各辖区人员数据统计:id", val.echartsName);
        },
    },
};
</script>

<style lang="scss" scoped>
.all-box {
    background-color: #f0f2f5;
}
.top-fff-box {
    background-color: #fff;
    height: 56px;
    line-height: 56px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    .top-select {
        margin-left: 13px;
    }
}
.topdivx {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    // background-color: #fff;
    // padding: 20px 26px 26px;
    .divn {
        // width: 409px;
        // width: 32.7%;
        width: 24.4%;
        // height: 117px;
        height: 125px;
        // background-color: rgb(0, 176, 255);
        // border-radius: 5px;
        font-size: 16px;
        line-height: 47px;
        display: flex;
        border-radius: 5px;
        // flex-wrap: wrap;
        // flex-direction: column;
        // margin-left: 13px;
        .topspanx {
            font-weight: 400;
            font-size: 18px;
            color: rgba(247, 247, 247, 1);
            line-height: 30px;
            margin-left: 20px;
            margin-top: 20px;
            // margin-bottom: 21px;
            margin-bottom: 10px;
        }
        .text-num {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            width: 85%;
            .topspancent {
                font-family: DIN;
                font-weight: 500;
                font-size: 29px;
                color: rgba(247, 247, 247, 1);
                line-height: 30px;
                margin-left: 20px;
                // text-align: center;
            }
        }
        .top-img {
            margin-top: 27px;
            margin-right: 24px;
        }
    }
}

.topfirst-echarts-box {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    .slrytj {
        background-color: #fff;
        // border-radius: 5px;
        margin-right: 10px;
    }
    .two-right-echarts {
        display: flex;
        // margin-right: 20px;
    }
    .two-right-echarts {
        display: flex;
        // margin-right: 20px;
    }
    .jzgzrynldtj {
        background-color: #fff;
        // margin: 0 10px;
    }
    .jmgzryhsjctj {
        background-color: #fff;
        margin-left: 10px;
    }
    .jzgzryxbtj {
        background-color: #fff;
        margin-right: 10px;
    }
    .gxqjzrytj {
        // margin-left: 10px;
        background-color: #fff;
    }
}
</style>

花归去
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts 全局触发click点击事件（Label及柱状）
日常笔记/总结/系列知识梳理
06-09 7200
// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言 需求要点击Echart处理事件，通过myChart.on可实现，但只能点击柱状图才能触发，点击label(即：坐标文本)无法触发；通过myChart.getZr().on可全局监听Echart图，但无法准确的获取当前点击柱状的index；由此见下文 Echart图 Echart对象 option = {
柱状图echarts图表及点击事件
12-11
echarts柱状图，有点击事件，可以点到对应的事件，自己可以加上自己想要的功能。
Echarts柱状图柱子添加点击事件
CaseyWei
04-18 1085
方法二：结合getZr和click实现这个效果（比较麻烦，可以用于更复杂效果的实现）抛回父组件，直接用这个index去x轴data里面取当前被点击的柱子的x轴坐标。params.offsetX，params.offsetY 为点击位置的坐标。这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件。拿到被点击的柱子的index（从0开始，number类型）拿到被点击的柱子的X轴坐标name。结合click事件可以拿到点击位置。可以实现在点击位置展示弹框的效果。
echarts点击柱状图携带参数跳转页面
最新发布
qq_33911541的博客
05-23 579
echarts点击柱状图携带参数跳转页面
echarts 柱状图--柱体的点击事件
weixin_58142279的博客
11-04 2419
echarts 柱状图--柱体的点击事件
Echarts饼状图-柱状图点击事件
m0_66879773的博客
03-20 1190
【代码】Echarts饼状图-柱状图点击事件。
echarts中柱状图添加点击事件并且选中点击的高亮
weixin_43703816的博客
06-20 8466
echarts中柱状图添加点击事件并且选中点击的高亮
Echart 点击事件整理
qq_34618492的博客
09-15 7324
工作经常会用到图表组件，这里主要针对 echarts 插件中的点击事件说明，代码不是很难，主要是如何区分点击的位置。
echart柱状图点击柱状触发一个事件
weixin_51353891的博客
11-24 1939
收藏个项目中遇到的问题: echart柱状图点击柱状触发一个事件
echart统计图表
03-27
echart统计图表：饼状图，折线图，柱状图，echart所需js
解决-echarts点击左边柱状图的任意一个柱子，右边柱状图动态呈现相应的数据过程中的-方法
m0_55728090的博客
04-22 6485
效果就是这样，当我点击左边柱状图的任意一个柱子的时候，右边就呈现该柱子里面的你想要呈现的数据。 第一步:首先肯定是创建容器来存放柱状图啦 <div class="BigBox"> <div id="leftBar" style="width: 750px; height: 500px;" @click="isShowRightBar"></div> <div id="rightBar" style="width: 600px; height:
vue 项目引入echarts 添加点击事件操作
10-14
本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这可以通过以下代码完成： ```javascript import echarts from '...
Echarts 柱状图自动刷新数据
11-01
Echarts 柱状图自动刷新数据,前台js的写法,不涉及到后台,下载打开即可查看效果
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
柱状图点击修改颜色.zip
08-07
highcharts点击柱状图修改颜色，由于highcharts没有对应的api，原型埋的比较深，公司需要功能，自己找了好一会儿，终于找到了办法，状图颜色实时更新。点击就变色,其他的颜色复原
echarts点击柱状体将所需要的数据，传递给另一页面，联调问题
weixin_44501715的博客
03-13 1753
** 利用vuex ** 1.在柱状图方法中，添加点击事件 setBar.on(‘click’,function (param) {} 点击事件，可以输入params 属性里有什么 2.因为我需要这些参数，来调用接口 3.然后新建 store.js文件 这里是要传递的参数 按照方法来就行 接口返回的数据接受 新建rent.js文件，HttpUtils是请求工具类， api是接口文件 至...
Echarts 点击柱状图跳转其他柱状图
weixin_34355559的博客
12-27 2310
2019独角兽企业重金招聘Python工程师标准>>> ...
echarts 多柱状图点击事件分别监听效果实现
jinse29的博客
09-06 3110
echarts 多柱状图点击事件分别监听效果实现
ECharts图添加点击事件
MistyWood的博客
04-03 4604
首先初始化echarts实例 var myChart = echarts.init($('#myChart')); 初始化echarts实例之后，可以直接给对象绑定onclick事件 myChart.on('click', function (params) { }); 可以通过params的值来判断具体点击是哪个位置。 echarts生成的图表，series区域默认打开了点击事件，所以点...
function fulshEchart(names, mmdatas, mmValue){ console.log(names); console.log(mmdatas); console.log(mmValue); option = { title: { text: '宠物健康分析' }, tooltip: { trigger: 'axis' }, legend: { left: 'center', data: names }, radar: mmdatas, series: mmValue }; if (option && typeof option === "object") { myChart.setOption(option, true); } } 解释这个代码
07-12
这段代码定义了一个名为 `fulshEchart` 的函数，它接受三个参数：`names`、`mmdatas`、`mmValue`。这个函数的目的是根据传入的数据动态生成一个 echarts 图表。 在函数内部，首先通过 `console.log` 打印出传入的 `names`、`mmdatas`、`mmValue` 的值，用于调试和验证数据是否正确。 然后，定义了一个 `option` 对象，包含了图表的配置项。其中包括一个标题、一个工具提示、一个图例和两个数据系列（雷达图数据和系列数据）。 最后，通过判断 `option` 存在且类型为对象，调用 `myChart.setOption(option, true)` 来将配置应用到 echarts 图表上。 这段代码假设在调用时已经创建了一个名为 `myChart` 的 echarts 实例，并且会根据传入的数据动态更新图表的展示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值