zoukankan      html  css  js  c++  java
  • echart折线区域图

    在引入echart区域折线图时,没有出现对应的区域图

    当发现引入下面代码到自己的代码中并没有对应的区域图


    option = { 
    xAxis: { 
    type: 'category', 
    boundaryGap: false, 
    data: mydata.xname(改成自己的数据) 
    }, 
    yAxis: { 
    type: 'value' 
    }, 
    series: [{ 
    data: mydata.ydata,(改成自己的数据) 
    type: 'line', 
    areaStyle: {} 
    }] 
    };[这里写链接内容](http://echarts.baidu.com/examples/editor.html?c=area-basic) 
    这样获取的代码时间2018.4.20

    这里写图片描述

    经过查找api,发现echarts本身的好多代码自己引入了,加上自己的echarts可能被后台压缩过,导致该出现的没有出现

    最终的解决办法就是改成了如下代码

    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: mydata.xname(改成自己的数据)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mydata.ydata,(改成自己的数据)
            type: 'line',
             itemStyle: {normal: {areaStyle: {type: 'default'}}}
        }]
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    结果就是很正常的:这里写图片描述

    在这图表中还可以用: 
    symbol:’none’, //这句就是去掉点的 
    smooth:true, //true就是让曲线变平滑的

  • 相关阅读:
    Notepadd ++ PluginManager安装
    Srping cloud Ribbon 自定义负载均衡
    Spring cloud Eureka 和 Zookeeper 比较
    Spring cloud info信息显示
    kafka 在Windows端安装 找不到或无法加载主类 的解决方案
    Linux kafka 单机安装
    mina
    @bzoj
    @51nod
    @topcoder
  • 原文地址:https://www.cnblogs.com/snowhite/p/9528731.html
Copyright © 2011-2022 走看看