关于Echarts的填坑之旅

GT 发布于2019-08-20 16:07 / 3239人阅读

摘要：正如标题所说，这是的一遍填坑，如果你是一些的配置的话可以阅读的官网配置信息。我想官网中关于的动态数据案例说的也够详细，但是它们的并不是我想要的格式，这时候怎么办，我们可以通过和和达到设置坐标的效果，通过来设置间距。

正如标题所说，这是Echarts的一遍填坑，如果你是一些echart的配置的话可以阅读
http://echarts.baidu.com/opti...的官网配置信息。今天我想给大家分享的是一些我前段时间从highchart改echart的时候所遇到的一些问题。希望能对大家有用。

1、echart 在使用的时候标签必须明确的定义其高度，不能让其自适应，否则会出现显示不出来的情况！

2、关于echart中Y坐标不完全等比例显示问题

当你遇到Y轴不是等分显示的时候，这时候你就应该看看你Y坐标配置中是否配置了max这个选项，当配置max这一项的时候，Y坐标的最大显示数会以你配置的最大值作为结束，也就可能出现Y坐标不能完全等分显示的情况

yAxis :{
    type: "value",
    axisLine: {
        show: false
    },
    axisTick: {
        show: false,
    },
    scale: true,
    splitLine:{ 
        show:true,
    },
    splitNumber: 3,
    position:"left",
    //max:_self.value,
    axisLabel: {
        inside: false,
        interval: 0,
        formatter: function(value, index) {
            return value;
        }
    }
}

3、关于X轴type类型为time时如何自定义时间轴
有时候在项目中我们可能为遇到将X轴设置为时间轴的时候，但是又想自定义一定的规则来达到想要的效果。那么怎么办。我想echart官网中关于time的动态数据案例说的也够详细（http://echarts.baidu.com/demo...），但是它们的并不是我想要的格式，这时候怎么办，我们可以通过max和min和达到设置X坐标的效果，通过interval来设置间距。

 xAxis :{
    type:"time",
    axisTick: { //坐标轴刻度相关设置
        alignWithLabel: true,
        lineStyle: {
            color: "#ccc"
        }
    },
    axisLine: { //坐标轴轴线相关设置
        lineStyle: {
            color: "#ccc"
        }
    },
    axisLabel: {    //坐标轴刻度标签的相关设置
        textStyle: {
            color: "#666"
        }
    },
    splitLine: {
        show: false
    },
    minInterval: 24 * 3600 * 1000,
    interval: 24 * 3600 * 1000 * tickInterval,
    min:_self.order_chart_data.order_chart_xAxis[0],
    max:_self.order_chart_data.order_chart_xAxis[_self.order_chart_data.order_chart_xAxis.length-1]
},

效果：

时间选择为1天时，图表并以小时为单位更新数据：

时间选择为大于1天时，图表并以天为单位更新数据：

当设置X轴type类型为time的时候还有几点要注意的时：

(1)、x轴配置中不用配置data属性
(2)、series中的数据类型data属性要严格按照下面这种格式书写数据格式（否则数据会加载不出来）

    series : {
        name: "echarts",
        yAxisIndex: 0,
        type:"line",
        data : {
            name:_self.order_chart_data.order_chart_xAxis[i],
            value: [_self.order_chart_data.order_chart_xAxis[i],yAxis_one[i]]
        },
        showSymbol: false,
        itemStyle: {
            normal: {
                color: "#5AAAEA",
                lineStyle: {
                    color: "#5AAAEA"
                }
            }
        }
    }

要说的就这么多，总的来说echart相对来说还是比较简单的，官网的案例基本可以满足全部需要。希望以上问题对大家能有帮助！！！

服务器托管海外云主机学习之旅填坑史来填坑填坑记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82723.html

使用vue开发微信公众号下SPA站点的填坑之旅

摘要：原文见我的博客，点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱。原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。 ...

yeyan1996 2019-08-21 15:09 评论0 收藏0
基于 LNMP 搭建个人网站的填坑之旅

摘要：博客搬家原地址原发表时间本文讨论使用安装包构建网站底层服务后，包括域名解析，的管理等的一系列填坑历程。域名解析问题相关首先将本人的网站信息公布如下域名地址主机提供方搬瓦工域名托管及解析阿里云万网本文之后的内容均是基于以上信息。「博客搬家」原地址: CSDN 原发表时间: 2016-11-16 本文讨论使用 LNMP 安装包构建网站底层服务后，包括域名解析，MySQL 的管理等...

B0B0 2019-05-29 17:52 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0