Echart样式
Echart样式：
myChart.setOption({
grid:{x:45,
y2:60},
title : {
text:’天气’,
textStyle: {
fontSize: 14,
color: ‘#333’
}
},
legend: {
data:[‘升温’,’降温’]
},
calculable : true,
xAxis : [
{
type : ‘category’,
axisLabel: {
show: true,
rotate: 25
},
data : [‘1’,’2’,’3’,’4’,’5’,’6’,’7’,’8’,’9’,’10’,’11’,’12’]
}
],
yAxis : [
{
type : ‘value’,
splitArea : {show : true},
axisLabel: {
show: true,
formatter: ‘{value} %’
}
}
],
series : [
{
name:'气温',
type:'bar',
itemStyle:{ normal:{ label:{show: true,position:'top',formatter:'{c}%'}}},
data:[30.00,50.00,50.00,50.00,60.00,50.00,50.00,12.44,38.00,30.00,50.00,30.00]
},
{
name:'气温',
type:'bar',
itemStyle:{ normal:{ label:{show: true,position:'top',formatter:'{c}%'}}},
data:[-13.37,0.83,-6.77,-3.53,0.25,-12.69,-0.34,-4.51,1.29,-6.20,1.77,7.87]
}
]
});
myChart.setTheme(‘infographic’);
myChart.setOption( {
title : {
text: ‘气温’
},
tooltip : {
trigger: ‘axis’
},
legend: {
data:[
‘温度’,
‘天气’
]
},
calculable : true,
grid:{x:45,
y2:60},
xAxis : [
{
type : 'category',
axisLabel: {
show: true,
rotate: 25
},
data : data : ['1','2','3','4','5','6','7','8','9','10','11','12']
},
{
type : 'category',
axisLabel: {
show: true,
rotate: 25
},
axisLine: {show:false},
axisTick: {show:false},
axisLabel: {show:false},
splitArea: {show:false},
splitLine: {show:false},
data : data : ['1','2','3','4','5','6','7','8','9','10','11','12']
}
],
yAxis : [
{
type : 'value',
axisLabel:{formatter:'{value} %'}
}
],
series : [
{
name:'天气',
type:'bar',
barWidth : 30,
itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'%\n'):'';}}}},
data:[12.6, 15.9, 9.0, 26.4, 28.7, 70.7, 15.6, 82.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'KPI',
type:'bar',
barWidth : 30,
xAxisIndex:1,
itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true,textStyle:{color:'#000000'},formatter:function(p){return p.value > 0 ? (p.value +'%\n'):'';}}}},
data:[80, 89, 70, 63.2, 55.6, 76.7, 85.6, 82.2, 82.6, 80.0, 84, 83]
}
]
});
myChart.setOption( {
title : {
text: ‘天气’
},
tooltip : {
trigger: ‘axis’
},
grid:{x:35,
x2:20,
y2:30},
legend: {
data:[
‘气温’,
‘压力’
],
x: ‘right’
},
calculable : true,
xAxis : [
{
type : 'category',
axisLabel: {
show: true
},
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
{
type : 'category',
axisLabel: {
show: true
},
axisLine: {show:false},
axisTick: {show:false},
axisLabel: {show:false},
splitArea: {show:false},
splitLine: {show:false},
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
axisLabel:{formatter:'{value}'},
splitArea : {show : true}
}
],
series : [
{
name:'气温',
type:'bar',
barWidth : 18,
itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true}}},
data:[65,46,55,110,56,82,76,60,73,59,61,71]
},
{
name:'压力',
type:'bar',
barWidth : 18,
xAxisIndex:1,
itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true,textStyle:{color:'#000000'},formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},
data:[260,120,192,325,148,227,165,143,126,182,178,192]
}
]
});
myChart.setOption({
title : {
text: ‘气温’,
x:’lef’,
textStyle: {
fontSize: 14,
color: ‘#333’
}
},
tooltip : {
trigger: ‘item’,
formatter: “{b} : {c} ({d}%)”
},
calculable : true,
series : [
{
name:’压力’,
type:’pie’,
radius : ‘45%’,
center: [‘50%’, ‘55%’],
data:[
{value:260, name:’1’},
{value:295, name:’2’},
{value:30, name:’3’},
{value:34, name:’4’},
{value:290, name:’5’},
{value:69, name:’6’},
{value:22, name:’7’},
{value:37, name:’8’},
{value:61, name:’9’},
{value:48, name:’10’},
{value:28, name:’11’},
{value:185, name:’12’}
]
}
]
});