码迷,mamicode.com
首页 > 其他好文 > 详细

关于Echarts的填坑之旅

时间:2020-05-15 20:35:45      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:orm   div   不完全   ems   format   标签   interval   value   规则   

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

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

<div id="echart" style="width:100%;height:300px;"></div>

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相对来说还是比较简单的,官网的案例基本可以满足全部需要。希望以上问题对大家能有帮助!!!

关于Echarts的填坑之旅

标签:orm   div   不完全   ems   format   标签   interval   value   规则   

原文地址:https://www.cnblogs.com/10manongit/p/12896647.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!