可上下拖拽的柱形图

最新推荐文章于 2023-03-15 09:46:04 发布

weixin_45372212

最新推荐文章于 2023-03-15 09:46:04 发布

阅读量1k

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45372212/article/details/103578718

版权

该博客介绍了一种可上下拖拽的柱形图实现，通过拖动柱形图顶部和底部的圆圈，可以动态调整柱状图的数值。用户还可以点击柱形图获取对应数值，提供了一种交互式的数据展示方式。

摘要由CSDN通过智能技术生成

可上下拖拽的柱形图

效果图

在这里插入图片描述
模拟了折线图的拖拽效果；利用折线图的拖拽来改变柱状图的值；拖拽效果触发在各个柱形图的上下两个圆圈上，点击某个柱状图，还能获取到对应的值；

html部分

<div id="chartTest"  style="width: 600px;height: 400px;"></div>
    <div>
        <span style="line-height: 30px;font-size: 18px;margin-left: 30px;">数值：</span>
        <input type="text" v-model="inputValue" style="width:200px;height: 30px;margin-left: 10px;">
    </div>

js部分

var vm = new Vue({
   
        el: "#app",
        data () {
   
            return {
   
                xAxisData: ['总费用','房租','水电费','交通费','伙食费','日用品数'],
                seriesDataFz: [200, 1700, 1400, 1200, 300, 0],
                seriesDataMain: [1700, 1200, 300, 200, 900, 300],
                lineMax: [],
                lineMin: [],
                lineDataAll: [],
                inputValue: '',
            };
        },
        methods: {
   
            chartTest () {
   
                let dom = document.getElementById('chartTest');
                let myChart = echarts.init(dom);
                let yAxisData = this.lineMax;
                let lineMin = this.lineMin;
                let lineDataAll = this.lineDataAll;
                this.chartAction(myChart, yAxisData, lineMin, lineDataAll);
            },
            chartAction (myChart, yAxisData, lineMin, lineDataAll) {
   
                let option = {
   
                    tooltip: {
   
                        triggerOn: 'none',
                        formatter: function(params) {
   
                            return 'X: ' + params.name + '<br>Y最大: ' + parseInt(params.data)+'<br>Y最小: ' + parseInt(lineMin[params.dataIndex]);
                        }
                    },
                    grid: {
   
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    // dataZoom: {