1. 程式人生 > >echart折線區域圖

echart折線區域圖

one ret art 技術 net 就是 baidu char ech

在引入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就是讓曲線變平滑的

echart折線區域圖