Echarts的研究（一）

最新推荐文章于 2023-06-12 16:13:11 发布

chyna0

最新推荐文章于 2023-06-12 16:13:11 发布

阅读量491

点赞数

分类专栏： web前端 echarts 文章标签： echarts 移动框架 vue

本文链接：https://blog.csdn.net/skywqnan/article/details/75088584

版权

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

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

在移动端想要做一个类似刻度尺功能的需求，且需要有个当前值指到相应的位置。在手机端还要能达到每个屏幕的适配，需要考虑的细节挺多的。项目是采用的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