Echarts的研究（一）

最新推荐文章于 2024-11-22 16:34:50 发布

原创最新推荐文章于 2024-11-22 16:34:50 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #移动 #框架 #vue

web前端同时被 2 个专栏收录

4 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

在移动端项目中，为了实现一个自适应的刻度尺功能，并带有当前值指示，作者选择了Echarts作为解决方案，尤其是其内置的适配功能。在Vue框架下，通过改造Echarts的堆叠柱状图，成功达到了预期效果。文章介绍了如何在Vue组件中初始化Echarts实例来完成这一需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端想要做一个类似刻度尺功能的需求，且需要有个当前值指到相应的位置。在手机端还要能达到每个屏幕的适配，需要考虑的细节挺多的。项目是采用的vue框架，百度了网上一些jquery插件，但是都达不到想要的效果，最后还是采用了使用echarts中的堆叠柱状图改编，毕竟echarts已经做好了适配，这块不用在考虑。

那采用vue框架，当然就是组件化开发喽。

初始化echarts实例方法：

  methods:{
            initStack:function () {
                this.stackChart = echarts.init(document.getElementById(this.stackSet.id));
//                this.stackChart = echarts.init(this.$refs.stackBox);

                // 指定图表的配置项和数据
                this.option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
//                        data: ['过低', '正常','过高']
                        top:'-4',
                        itemGap:6,
                        itemWidth:14,
                        itemHeight:7,
                        textStyle:{
                            color:'#6d6d72'
                        },
                        data:[]
                    },
                    grid: {
                        left: '-6%',
                        right: '5%',
                        bottom: '5%',
                        top:'25',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'value',
                        position:"top", //坐标轴的位置
                        nameGap:0, //坐标轴名称与轴线之间的距离。
                        show:true,
                        max:'dataMax',
                        axisLine:{
                            lineStyle:{
                                color:'#797676'//Y轴颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: [],
                        show:false
                    },
                    series: [
                        {
//                            name: '过低',
                            type: 'bar',
                            stack: '总量',
                            barWidth:'80%',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'inside'
                                }
                            },
                            itemStyle:{
                                normal:{
                                    color:'#FF6733'
                                }
                            },
//                            data: [320]
                        },
                        {
//                            name: '正常',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'inside'
                                }
                            },
                            itemStyle:{
                                normal:{
                                    color:'#50a8f2'
                                }
                            },
//                            data: [120]
                        },
                        {
//                            name: '过高',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'inside'
                                }
                            },
                            itemStyle:{
                                normal:{
                                    color:'#ff3333'
                                }
                            },
//                            data: [220]
                        },
                        {
                            data:  [],
                            label:{
                                normal:{
                                    show:true,
//                                    formatter:  function  (v){
//                                        return  v.value-offset;
//                                    },
                                    textStyle:{color:'#333',fontSize:'16'},
                                    position:'inside',
                                    offset:[0,12]// offset:[0,-10]
                                }
                            },
                            symbol:'image://asserts/img/static/icon_teld_normalUp.png',
                            symbolSize:[85,60],
                            symbolOffset:[0,8],
                            type:  'scatter'
                        }


                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.stackChart.setOption(this.option);
            }
        }

大体样子使用bar可以展示出来，但是指向当前值的那个箭头图标改怎样显示，这个时候就采用了echarts中的散点气泡，类型为scatter。可以引入图片来使用。
也可以设置位置，及文字显示。具体使用详见官网。
2.动态获取值展示到页面
 watch: {
            dataStack: function (val) {
                debugger;
                var seriesArr = val;
                for (var i = 0; i < val.length; i++) {
                    this.option.series[i].data = [val[i].value];
                    this.option.series[i].name = val[i].name;
                    this.option.legend.data.push(val[i].name);
                }
                this.stackChart.setOption(this.option);
            }
        }

最终的显示效果如下：