echarts 折线图
生活随笔
收集整理的這篇文章主要介紹了
echarts 折线图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
option = {
tooltip:{
trigger:"axis",
textStyle:{
color:"#FFF",
},
},
xAxis: {
type: 'category',
axisTick:{show:false},
axisLabel:{
rotate:40 //控制文字傾斜
},
data: ['三門(mén)峽', '濮陽(yáng)', '漯河','鄭州', '平頂山', '南陽(yáng)', '駐馬店', '三門(mén)峽', '濮陽(yáng)', '漯河']
},
yAxis: {
type: 'value',
axisLine:{show:false},
axisTick:{show:false},
max:1.2,
},
series: [{
data: [0, 0, 0,0, 0, 0, 0.3,0,0,0],
type: 'line',
markPoint: { //圖表標(biāo)注
data: [
{
type: 'max',
name: '最大值',
itemStyle:{ //自定義標(biāo)注的顏色
color:"orange"
}
},
{
type: 'min',
name: '最小值',
itemStyle:{ //自定義標(biāo)注的顏色
color:"green"
}
}
],
label:{
position:"insideTop" ,//標(biāo)注文字位置
distance:3 //距離圖形元素的距離
},
symbolSize:[40,32],
symbolOffset: ['26%', '-50%'], //圖標(biāo)偏移
animation:true,
// symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z, path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
// symbol:"image://https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2318012298,1118210339&fm=26&gp=0.jpg"
symbol:"path://M736 101.3H288c-123.2 0-224 100.8-224 224v149.3c0 123.2 100.8 224 224 224h37.3v224l256-224H736c123.2 0 224-100.8 224-224V325.3c0-123.2-100.8-224-224-224z"
},
}]
};
option = {
xAxis: {
type: 'category',
data: ['河南', '河北', '江蘇', '新疆', '北京', '山東', '山西',"商丘","平頂山"],
axisTick: {show: false},
axisLabel:{
rotate:40,
}
},
yAxis:[
{
min:0,
max:1.2,
interval:0.2,
axisLine:{show:false},
axisTick: {show: false}
},
{
min:-10,
max:806,
interval:136,
axisLine:{show:false},
axisTick: {show: false},
axisLabel:{
formatter: '{value}%',
}
}
],
series: [
{
name:"本期",
data: [0.2, 0.01, 0.05, 0.02, 0.06, 0.04, 0.04,0.01,0.03],
type: 'bar',
barWidth:16,
barGap:0,
itemStyle:{
barBorderRadius:[10,10,0,0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#293c55" // 0% 處的顏色
}, {
offset: 1,
color: "#3fa7dc" // 100% 處的顏色
}], false)
},
},
{
name:"同期",
data: [0.45, 0.31, 0.05, 0.02, 0.06, 0.04, 0.04,0.01,0.98],
type:"line",
smooth:true,
itemStyle:{
color: "orange"
},
markPoint: { //圖表標(biāo)注
data: [
{
type: 'max',
name: '最大值',
itemStyle:{ //自定義標(biāo)注的顏色
color:"orange"
}
},
{
type: 'min',
name: '最小值',
itemStyle:{ //自定義標(biāo)注的顏色
color:"green"
}
}
],
label:{
position:"insideTop" ,//標(biāo)注文字位置
distance:3 //距離圖形元素的距離
},
symbolSize:[40,32],
symbolOffset: ['26%', '-50%'], //圖標(biāo)偏移
animation:true,
symbol:"path://M736 101.3H288c-123.2 0-224 100.8-224 224v149.3c0 123.2 100.8 224 224 224h37.3v224l256-224H736c123.2 0 224-100.8 224-224V325.3c0-123.2-100.8-224-224-224z"
}
},
]
};
總結(jié)
以上是生活随笔為你收集整理的echarts 折线图的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: c语言意义y x 8.0,C语言符号意义
- 下一篇: 科普 | 你必须了解的漏洞利用缓解及对抗