echarts图 示例
版权声明：Copyright © https://cloud.tencent.com/developer/article/1476320
占位图
option = {
title: {
text: ‘80%’,
x: ‘center’,
y: ‘center’,
textStyle: {
fontWeight: ‘normal’,
color: ‘#0580f2’,
fontSize: ‘90’
}
},
color: ‘rgba(176, 212, 251, 1)’,
legend: {
show: true,
itemGap: 12,
data: ‘01’, ‘02’
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: 80,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: 20
}]
}]}
水平柱图
var myColor=’#0096f3’;
option = {
backgroundColor:’#0e2147’,
grid: {
left: ‘0%’,
top:‘0%’,
right: ‘0%’,
bottom: ‘8%’,
containLabel: true
},
xAxis: [{
show: false,
}],
yAxis: [{
axisTick:‘none’,
axisLine:‘none’,
offset:‘27’,
axisLabel: {
textStyle: {
color: ‘#ffffff’,
fontSize:‘16’,
}
},
data: ‘8’,
}, {
axisTick:‘none’,
axisLine:‘none’,
axisLabel: {
textStyle: {
color: ‘#ffffff’,
fontSize:‘16’,
}
},
data: ‘100%’
},{
axisLine:{
lineStyle:{
color:'rgba(0,0,0,0)'
}
},
data: [],
}],
series: [{
name: '条',
type: 'bar',
stack:'圆',
yAxisIndex: 0,
data: [0],
label:{
normal:{
show:true,
position:'right',
formatter:function(param){
return param.value + '%';
},
textStyle:{
color: '#ffffff',
fontSize:'16',
}
}
},
barWidth: 24,
itemStyle: {
normal: {
color: function(params) {
var num=myColor.length;
return myColor[params.dataIndex%num]
},
}
},
z: 2
}, {
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [99.4],
barWidth: 20,
itemStyle: {
normal: {
color: '#0e2147',
}
},
z: 1
}, {
name: '外框',
type: 'bar',
yAxisIndex: 2,
barGap: '-100%',
data: [100],
barWidth: 24,
itemStyle: {
normal: {
color: function(params) {
var num=myColor.length;
return myColor[params.dataIndex%num]
},
}
},
z: 0
},
]
};
// 谷峰图
option = {
backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['增长数'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#00c7ff'
}
},
data: ['4号', '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#00c7ff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
show: false
}
}],
series: [{
name: '增长数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5ff6e9'
}, {
offset: 0.8,
color: '#7370fd'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]};
// 折线图
option = {
color: ’#3398DB’,
title: {
text: ‘各省数据合格率统计’,
//textStyle: {
// color: ‘#fff’
//}
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
},
formatter: “{b}
合格率: {c}%”
},
/legend: {
data: date
},/
grid: {
left: ‘4%’,
right: ‘4%’,
bottom: ‘2%’,
containLabel: true
},
xAxis: {
type: ‘value’,
boundaryGap: 0, 0.01,
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: ‘{value}%’,
textStyle: {
//color: ‘#fff’,
fontWeight: ‘80’
}
}
},
yAxis: {
type: ‘category’,
data: ’<20%’, ‘20%-40%’, ‘40%-60%’, ‘60%-80%’, ‘>=80%’,
axisLabel: {
show: true,
interval: 0,
rotate: 0,
margin: 10,
inside: false,
textStyle: {
//color: ‘#fff’,
fontWeight: ‘50’
}
}
},
series: [{
type: ‘bar’,
label: {
normal: {
show: true,
// formatter: ‘{c}’,
formatter: function(v) {
var val = v.data;
if (val == 0) {
return ‘’;
}
return val;
},
color: ‘#fff’
}
},
data: 22, 33, 55, 77, 88
}]
};
动态数据
option = {
title: {
text: ‘动态数据’,
subtext: ‘纯属虚构’
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’,
label: {
backgroundColor: ‘#283b56’
}
}
},
legend: {
data:‘最新成交价’, ‘预购队列’
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: ‘category’,
// boundaryGap: true,
data: timesDate()
},
],
yAxis: [
{
type: ‘value’,
scale: true,
name: ‘价格’,
max: 30,
min: 0,
boundaryGap: 0.7, 0.2
},
],
series: [
{
name:‘最新成交价’,
type:‘line’,
smooth: true,
symbolSize: 5,
symbol: ‘circle’,
showSymbol: false,
areaStyle:{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgba(0, 187, 237, 0.5)’
}, {
offset: 0.8,
color: ‘rgba(0, 189, 237, 0)’
}], false),
shadowColor: ‘rgba(0, 0, 0, 0.1)’,
shadowBlur: 10
}
},
markPoint:{
symbolSize: 10,
symbol: ‘circle’,
data:[{
coord:9, 2
}],
label:{
normal:{
show: true,
position: ‘top’,
formatter: function(params) {
if (params.dataIndex === 8){
return ‘{b}’
}
}
}
},
},
markLine: {
data: [
{yAxis: 8, name: ‘实时’}
]
},
data:rwD()
}
]
};
var r = [];
r = rwD();
setInterval(function (){
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,’’);
var data1 = option.series[0].data;
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
var markData = data1[data1.length-1];
option.series[0].markPoint.data[0].coord[1] = markData;
option.series[0].markLine.data[0].yAxis = markData;
myChart.setOption(option);}, 2100);
function rwD () { // y轴数据内容更新
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()10 + 5).toFixed(1) - 0);
len++;
}
return res;
}
function timesDate(){ // x轴曲线时间
var now = new Date();
var res = [];
var len = 10;
while (len–) {
res.unshift(now.toLocaleTimeString().replace(/^\D/,’’));
now = new Date(now - 20000);
}
return res;
}
动态数据2
var barColor = [];
var emColor = [];
var color0 = "#089280", “#af540b”, “#17559e”;
var color10 = ’#12ffd0’, ‘#ffcc00’, ‘#0cb0ed’;
if (navigator.userAgent.indexOf(“MSIE 8.0”) > 0) {
for (var i = 0; i < color0.length; i++) {
barColori = {
color: color0i,
}
emColori = {
color: color10i
}
}
} else {
for (var j = 0; j < color0.length; j++) {
barColorj = {
color: {
colorStops: [{
offset: 0,
color: color0j // 0% 处的颜色
}, {
offset: 1,
color: color10j // 100% 处的颜色
}]
}
}
emColorj = {
color: {
colorStops: [{
offset: 0,
color: color10j // 0% 处的颜色
}, {
offset: 1,
color: color0j // 100% 处的颜色
}]
}
}
}
}
//图表默认数组
var xzhou2 = [],
yzhou2 = [],
zzhou2 = [],
xzhou3 = [],
yzhou3 = [],
zzhou3 = []; //节拍
for (var i = 0; i <= 40; i++) {
xzhou2i = 0;
yzhou2i = 0;
zzhou2i = 0;
xzhou3i = 0;
yzhou3i = 0;
zzhou3i = 0;
}
option = {
backgroundColor: ‘#203958’,
tooltip: {
trigger: ‘axis’,
axisPointer: {
lineStyle: {
color: ‘#ddd’
}
},
backgroundColor: ‘rgba(255,255,255,1)’,
padding: 5, 10,
textStyle: {
color: ‘#7588E4’,
},
extraCssText: ‘box-shadow: 0 0 5px rgba(0,0,0,0.3)’
},
legend: {
show: true,
shadowColor: “#fff”,
shadowBlur: 5,
shadowOffsetX: 5,
data: ‘X轴’, ‘Y轴’, ‘Z轴’,
top: ‘5%’,
// left: “18%”,
textStyle: {
color: ‘#fff’,
fontSize: 14
// padding: 3, 20, 5, 7
},
// itemWidth: 64,
itemHeight: 10
},
grid: {
top: ‘30%’,
left: ‘7%’,
right: ‘8%’,
bottom: ‘10%’,
containLabel: true
},
xAxis: {
type: ‘category’,
data: (function() {
var now = new Date();
var res = [];
var len = 40; //显示个数
while (len–) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ‘’));
now = new Date(now - 2000);
}
return res;
})(),
boundaryGap: false,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: ‘#2d67a7’
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
}
},
yAxis: {
type: ‘value’,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: ‘#2d67a7’
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
}
},
series: [{
name: ‘X轴’,
type: ‘line’,
smooth: true,
showSymbol: false,
symbol: ‘circle’,
symbolSize: 1,
data: xzhou3,
itemStyle: {
normal: barColor0,
emphasis: emColor0
},
lineStyle: {
normal: {
width: 2,
shadowColor: ‘rgba(0,0,0,0.6)’,
shadowBlur: 10,
shadowOffsetY: 5
}
}
}, {
name: ‘Y轴’,
type: ‘line’,
smooth: true,
showSymbol: false,
symbol: ‘circle’,
symbolSize: 1,
data: yzhou3,
itemStyle: {
normal: barColor1,
emphasis: emColor1
},
lineStyle: {
normal: {
width: 2,
shadowColor: ‘rgba(0,0,0,0.6)’,
shadowBlur: 10,
shadowOffsetY: 5
}
}
},
{
name: ‘Z轴’,
type: ‘line’,
smooth: true,
showSymbol: false,
symbol: ‘circle’,
symbolSize: 1,
data: zzhou3,
itemStyle: {
normal: barColor2,
emphasis: emColor2
},
lineStyle: {
normal: {
width: 2,
shadowColor: ‘rgba(0,0,0,0.6)’,
shadowBlur: 10,
shadowOffsetY: 5
}
}
}
]
}
setInterval(function() {
subLoadX = Math.random() * 100;
subLoadY = Math.random() * 100;
subLoadZ = Math.random() * 100;
xzhou3.shift();
xzhou3.push(subLoadX);
yzhou3.shift();
yzhou3.push(subLoadY);
zzhou3.shift();
zzhou3.push(subLoadZ);
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ‘’);
option.xAxis.data.shift();
option.xAxis.data.push(axisData);
myChart.setOption(option);
}, 1000)
带宽图
option = {
backgroundColor: ‘#00265f’,
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['增长数'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#00c7ff'
}
},
data: ['4号', '5号', '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#00c7ff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
show: false
}
}],
series: [{
name: '增长数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5ff6e9'
}, {
offset: 0.8,
color: '#7370fd'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]};
腾讯云开发者
