首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >echart 图表动态的显示拐点为空心 原

echart 图表动态的显示拐点为空心 原

作者头像
tianyawhl
发布2019-04-04 15:39:07
发布2019-04-04 15:39:07
2.2K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行

有时候我们需要在月份没结束时,此处的数据拐点样式与之前结束月份有区别,如下

如上图假如七月份还没有结束,最后一个拐点的样式是空心的

思路是需要先判断空数据的位置,然后在位置之前的数据设置样式,

代码语言:javascript
代码运行次数:0
运行
复制
var specialVal = { value: 300, itemStyle: { normal: { color: "#3d4d66", borderColor: "#e3cb02", borderWidth: 2, borderType: 'solid' } } };
var option7 = {
    color: ['#16d479', '#05a7f2', '#e3cb02'],
    /*title : {  
       text : '行业1',  
        x : 'center',  
        y : 'top',  
        textStyle : {  
            fontSize : 25,  
        }  
    }, */

    grid: {
        top: 40,
        bottom: 20,
        left: 10,
        right: 10,
        containLabel: true,

    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter: function(params) {
            return params[0].name + '<br/>' +
                params[0].seriesName + ' : ' + params[0].value + ' 万方' + '<br/>' +
                params[1].seriesName + ' : ' + params[1].value + ' 万方' + '<br/>' +
                params[2].seriesName + ' : ' + params[2].value + ' 万方' + '<br/>'

        }
    },
    legend: {
        data: ['2015年', '2016年', '2017年'],
        right: 5,
        top: 0
    },
    xAxis: {

        type: 'category',
        axisLabel: { interval: 0 },

        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    },

    yAxis: {
        name: '    用气量 (万方)',
        nameTextStyle: { fontSize: 15 },
        splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
                color: ['#4b5d7a'],
                type: 'solid'
            },
        },
    },
    series: [{
            name: '2015年',
            type: 'line',
            smooth: true,
            data: [600, 900, 800, 700, 600, 500, 400, 800, 600, 700, 600, 700],

        },
        {
            name: '2016年',
            type: 'line',
            smooth: true,
            data: [500, 750, 850, 950, 850, 750, 650, 950, 750, 890, 600, 500],
        },
        {
            name: '2017年',
            type: 'line',
            smooth: true,
            data: [400, 650, 750, 850, 750, 650, 550, null, null, null, null, null],
        },
        /*
        {
            name: '最近月用量',
            type: 'line',
            smooth:true,
            data: [null,null,null,null,null,null,null,null,null,null,null,900],
        },*/

    ]
};
for (i = 0; i < 11; i++) {
    if (option7.series[2].data[i] == null) {
        specialVal.value = option7.series[2].data[i - 1];
        option7.series[2].data[i - 1] = specialVal;
        break;
    }
}

var myChart = echarts.init(document.getElementById('barchart2'), theme);
myChart.setOption(option7);

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/01/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档