以下是常用echart樣式：
1、漸變、圓角；
2、背景透明；
3、多Y軸展示；
4、修改X軸、Y軸、線條、字體樣式等；
話不多說直接上代碼（代碼執行結果背景都是透明）：
一、透明背景雙曲線圖
代碼：
var option = {
backgroundColor: 'transparent',
color:['#ff0', '#07A803', '#EA421A'],
tooltip: {
trigger: 'axis',
formatter:function(params){
var relVal = params[0].name;
for(var i=0;i<params.length;i++){
relVal+='<br/>' + params[i].seriesName + ' : ' + params[i].value+"個";
}
return relVal;
}
},
legend: {
bottom:'5px',
icon: "circle",
itemWidth :10,
textStyle:{
color:'#fff'
}
},
grid: {
top:'15px',
left: '25px',
right: '15px',
bottom: '30px',
containLabel: true
},
xAxis: {
type: 'category',
// boundaryGap: false,
data: ['2015','2016','2017','2018'],
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgb(93,172,202)'
}
}
},
yAxis: {
type: 'value',
name:'項目（個）',
nameLocation:'middle',
nameGap:20,
splitNumber:2,
splitLine:{
lineStyle:{
color:'#0c2333'
}
},
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgb(93,172,202)'
}
}
},
series: [
{
name:'工程總數量',
type:'line',
smooth: true,
data: [6,3,4,3.8]
},
{
name:'實現完成',
type:'line',
smooth: true,
data: [5.8,1.5,6.3,4.2]
},
{
name:'按資金計劃下達',
type:'line',
smooth: true,
data: [4,2,4.5,2]
}
]
};
運行圖：
二、雙曲線漸變圖
代碼：
var option = {
backgroundColor: 'transparent',
title: {
text: ''
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
bottom:'5px',
icon: "circle",
textStyle:{
color:'#fff'
}
},
toolbox: {
show:false
},
grid: {
top:'15px',
left: '25px',
right: '15px',
bottom: '30px',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
},
data : ['2015','2016','2017','2018']
}
],
yAxis : [
{
name:'用水量（萬立方米）',
nameLocation:'middle',
nameGap:35,
type : 'value',
splitNumber:2,
splitLine:{
lineStyle:{
color:'#0c2333'
}
},
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
},
axisLabel:{
formatter: '{value}K'
}
}
],
series : [
{
name:'全年計劃用水量',
type:'line',
smooth:true,
itemStyle: {
color: '#FFFF4E'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 255, 0,1)'
}, {
offset: 1,
color: 'rgba(255, 255, 0,0)'
}])
},
data:[10, 1, 25, 19]
},
{
name:'全年實際用水量',
type:'line',
smooth:true,
itemStyle: {
color: '#3D2AD0'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(61, 42, 208,1)'
}, {
offset: 1,
color: 'rgba(61, 42, 208,0)'
}])
},
data:[24, 5, 26, 3]
}
]
};
運行圖：
三、漸變柱狀圖
代碼：
var option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter:function(params){
var relVal = params[0].name;
for(var i=0;i<params.length;i++){
relVal+='<br/>' + params[i].seriesName + ' : ' + params[i].value+"萬元";
}
return relVal;
}
},
grid: {
top:'15px',
left: '25px',
right: '15px',
bottom: '30px',
containLabel: true
},
legend: {
bottom:'5px',
icon: "circle",
itemWidth :10,
textStyle:{
color:'#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2015','2016','2017','2018'],
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: '水費（萬元）',
nameLocation:'middle',
nameGap:25,
splitNumber:2,
splitLine:{
lineStyle:{
color:'#0c2333'
}
},
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
}
}
],
series: [
{
name:'應收水費',
type:'bar',
data:[2.0, 26.9, 7.0, 23.2],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1.5,
[
{offset: 0, color: 'rgba(250,107,90,1)'},
{offset: 1, color: 'rgba(250,107,90,0)'}
]
)
}
}
},
{
name:'實收水費',
type:'bar',
data:[2.6, 14.9, 9.0, 22.4],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1.5,
[
{offset: 0, color: 'rgba(253,182,40,1)'},
{offset: 1, color: 'rgba(253,182,40,0)'}
]
)
}
}
},
{
name:'欠費',
type:'bar',
data:[2.6, 5.9, 9.0, 6.4],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1.5,
[
{offset: 0, color: 'rgba(53,56,210,1)'},
{offset: 1, color: 'rgba(53,56,210,0)'}
]
)
}
}
}
]
};
運行圖：
四、漸變圓角柱狀圖
代碼：
var option = {
backgroundColor: 'transparent',
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter:function(params){
var relVal = params[1].name;
relVal += '<br/>' + params[1].seriesName + ' : ' + params[1].value+"%";
return relVal;
}
},
legend: {
bottom:'5px',
icon: "circle",
textStyle: {
color: '#ccc'
}
},
grid: {
top:'15px',
left: '10px',
right: '15px',
bottom: '30px',
containLabel: true
},
xAxis: {
data: ['古城鎮','東塔寺鄉','市區','上橋鎮','郭家橋鄉','板橋鄉','金積鎮','馬蓮渠鄉','金銀灘鎮','高閘鎮','扁擔a溝鎮'],
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
},
axisTick: {
show: false
},
axisLabel: {
interval:0,
rotate:40
}
},
yAxis: {
splitNumber:5,
splitLine: {
lineStyle:{
color:'#0c2333'
}
},
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgba(93,172,202,1)'
}
},
axisLabel:{
formatter: '{value}%'
}
},
series: [ {
name: '',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: 'rgba(116,133,157,01)'
}
},
z:-12,
data: [100,100,100,100,100,100,100,100,100,100,100]
}, {
name: '已灌溉',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#D5D998'},
{offset: 1, color: '#028491'}
]
)
}
},
data: [30,50,40,20,80,50,70,30,50,40,20]
}]
};
運行圖：
五、疊加柱狀圖
代碼：
var option = {
backgroundColor: 'transparent',
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
},
formatter:function(params){
var relVal = params[0].name;
for(var i=0;i<params.length;i++){
relVal+='<br/>' + params[i].seriesName + ' : ' + params[i].value+"個";
}
return relVal;
}
},
grid: {
top:'15px',
left: '25px',
right: '15px',
bottom: '30px',
containLabel: true
},
legend: {
bottom:'5px',
icon: "circle",
itemWidth :10,
textStyle:{
color:'#fff'
}
},
xAxis : [
{
type : 'category',
data : ['2015','2016','2017','2018'],
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgb(93,172,202)'
}
}
}
],
yAxis : [
{
name:'項目（個）',
nameLocation:'middle',
nameGap:20,
type : 'value',
splitLine:{
lineStyle:{
color:'#0c2333'
}
},
axisTick: {
show: false
},
axisLine:{
show:false,
lineStyle:{
color:'rgb(93,172,202)'
}
}
}
],
series : [{
name:'水利',
type:'bar',
color:'#3B26B3',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[1,0,0,0]
},
{
name:'農業',
type:'bar',
color:'#6F2DB5',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[1, 1, 1, 1]
},
{
name:'發改',
type:'bar',
color:'#962CB2',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[1, 1, 1, 1]
},
{
name:'農發',
type:'bar',
color:'#DC235F',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[1, 1, 1, 1]
},
{
name:'國土',
type:'bar',
color:'#FA6B5A',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[3, 2, 1, 2]
},
{
name:'其他',
type:'bar',
color:'#0E6BDE',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:[0, 2, 1, 0]
}
]
};
運行圖：
六、多Y軸曲線圖（自定義樣式）
代碼：
var option = {
color: [ '#F78723','#6134B5', '#18BD03', '#27A5F9'],
tooltip: {
trigger: 'axis',
backgroundColor:'#FFFFFF',
textStyle: {
color: '#44518D'
},
axisPointer: {
type: 'cross'
}
},
grid: {
right: '14%',
left:'14%'
},
legend: {
data:['氣壓（hPa）','溫度（℃）','降水（mm）','相對溼度（%）'],
textStyle:{
color:'#8190D6'
}
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine:{
lineStyle:{
color:'#8190D6'
}
},
data: ['2000','2001','2002','2003','2004','2005','2006']
}
],
yAxis: [
{
type: 'value',
name: '氣壓（hPa）',
nameLocation:'middle',
nameGap:40,
min: 0,
max: 890,
offset: 60,
position: 'left',
axisLine: {
show:false,
lineStyle: {
color: '#F78723'
}
}
},
{
type: 'value',
name: '溫度（℃）',
nameLocation:'middle',
nameGap:30,
min: 0,
max: 60,
position: 'left',
axisLine: {
show:false,
lineStyle: {
color:'#6134B5'
}
}
},
{
type: 'value',
name: '降水（mm）',
nameLocation:'middle',
nameGap:30,
min: 0,
max: 100,
position: 'right',
axisLine: {
show:false,
lineStyle: {
color: '#18BD03'
}
}
},
{
type: 'value',
name: '相對溼度（%）',
nameLocation:'middle',
nameGap:30,
min: 0,
max: 100,
position: 'right',
offset: 65,
axisLine: {
show:false,
lineStyle: {
color: '#27A5F9'
}
}
},
],
series: [
{
name:'氣壓（hPa）',
type:'line',
yAxisIndex: 2,
smooth: true,
data:[13,2,3,14,5,6,7]
},
{
name:'溫度（℃）',
type:'line',
yAxisIndex: 1,
smooth: true,
data:[33,24,35,34,32,28,36]
},
{
name:'降水（mm）',
type:'line',
yAxisIndex: 0,
smooth: true,
data:[10,8,5,15,9,20,12]
},
{
name:'相對溼度（%）',
type:'line',
yAxisIndex: 3,
smooth: true,
data:[50,48,70,45,33,69,70]
},
]
};
運行圖：
