关于Echarts的填坑之旅

Posted 2020-12-20 10manongit

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