echarts数据过多，横坐标数据名称显示不全,echarts滚动条

原创已于 2023-04-06 16:59:17 修改 · 735 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

于 2023-03-13 12:00:25 首次发布

vue 同时被 2 个专栏收录

42 篇文章

订阅专栏

echarts

9 篇文章

订阅专栏

该代码示例展示了如何在Vue.js组件中使用Echarts库来初始化一个柱状图，展示水位-流量数据。方法包括设置图表配置，如标题、坐标轴、数据区域缩放以及监听legendselectchanged事件来处理图例选中状态。同时，当传入的day和num属性变化时，会自动更新图表数据。

<template>
    <div>
        <div id="echart" ref="echart" style="width: 100%;height: 300px;"></div>
    </div>
</template>
<script>
export default {
    props: {
        day: {
            type: Array,
            default: function () {
                return []
            }
        },
        num: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {
            myChart: null,
        }
    },
    methods: {
        initBar(day, num) {
            let dateline = this.$refs.echart
            this.myChart = this.$echarts.init(dateline);
            this.myChart.clear();
            var op = {
                title: {
                    text: "水位-流量曲线图",
                    left: "60",
                    show: false
                },
                xAxis: {
                    name: "时间",
                    type: "category",
                    data: day,
                    left: "60",
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: [
                    {
                        name: "m³",
                        alignTicks: true,
                        type: "value",
                        // splitLine: {
                        //     show: false
                        // }
                    },
                ],
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    left: "24",
                    right: "5%",
                    bottom: "50",
                    top: "20%",
                    containLabel: true,
                },
                legend: {
                    show: true,
                    right: "10px",
                    textStyle: {
                        color: "#000",
                        padding: [3, 0, 0, 0]
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                color: ['#25A4FF', '#43A478'],
                series: [
                    {
                        name: "供水量",
                        data: num,
                        type: "bar",
                    },
                ],
            };
            this.myChart.setOption(op);
            this.echclick(this.myChart)
        },
        echclick(myChart) {
            myChart.on("legendselectchanged", function (params) {
                let option = this.getOption();
                let select_value = Object.values(params.selected);
                let n = 0;
                select_value.map((res) => {
                    if (!res) {
                        n++;
                    }
                });
                if (n == select_value.length) {
                    option.legend[0].selected[params.name] = true;
                }
                this.setOption(option);
            });
        },
    },
    watch:{
        day:{
            handler(){
                this.initBar(this.day, this.num)
            }
        }
    }
}
</script>

dataZoom 组件用于区域缩放具体见文档Documentation - Apache ECharts