Echart图表设置项
1.雷达图设置标题 为不同颜色
optionyg = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
},
calculable: true,
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#747b95',
fontWeight: 'bold',
fontSize: 15,
padding: [3, 5]
},
formatter: function (value, indicator) {
var tps = value.split(' ');
return '{a|' + tps[0] + "}" + "" + ' {b|' + tps[1] + '}';
},
rich: {
a: {
color: "#747b95",
fontSize:15
},
b: {
color: "white",
fontSize: 15
}
}
},
indicator: legendstrs,
center: ['48.5%', '56%'],
radius: '60%',
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {
normal: {
color: "#e4ab22",
lineStyle: {
color: "#e4ab22"
},
}
},
areaStyle: {
normal: {
opacity: 0.8,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#e4ab22',
offset: 1
}
])
}
},
data: [
{
value: arryryqk,
name: '在岗人员'
}
]
}
]
};
2.折线图的legend 设置不同的颜色
option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}号 : {c}"
},
legend: {
x: 'center',
y: 15,
itemGap:25,
data:[
{
name: '巡检次数 今日5次',
textStyle:{
fontSize:14,
fontWeight:'bolder',
icon: 'image://./Vendor/Asset1/red.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
},
icon: 'pie',
},
{
name: '整改项数 今日1项',
textStyle: {
fontSize: 14,
fontWeight: 'bolder',
icon: 'image://./Vendor/Asset1/blue.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
},
icon: 'pie',
}
],
textStyle: {
color: '#FFFFDD',
rich: {
a: {
color: "white",
fontSize: 15
},
b: {
color: "#ffb948",
fontSize: 15
}
}
},
formatter: function (name) {
var tps = name.split(' ');
return '{a|' + tps[0] + "}" + "" + '({b|' + tps[1] + '})';
},
},
grid: { //直角坐标系内绘图网格
left: '5%',
right: '5%',
bottom: '15%',
containLabel: true
},
xAxis: [
{
type: "category",
name: "",
splitLine: { show: false},
axisLabel: { textStyle: { color: '#FFFFCC' } },
axisLine: { lineStyle: { color: '#747b95' } },
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]
}
],
yAxis: [
{
type: "value",
name: "",
splitLine: { show: false },
axisLabel: { textStyle: { color: '#FFFFCC' } },
axisLine: { lineStyle: { color: '#747b95' } }
}
],
calculable: true,
series: [
{
name: "巡检次数 今日5次",
type: "line",
areaStyle: { normal: {} },
itemStyle: {
normal: {
color: "#d74648",
lineStyle: {
color: "#d74648"
}
}
},
data: [8, 10, 16, 20, 27, 29, 32, 44, 55, 66, 65, 71, 76, 81, 85, 89, 93, 96, 100, 105, 111, 116, 117, 120, 125, 128, 130, 136, 138, 140, 150],
smooth: true
},
{
name: "整改项数 今日1项",
type: "line",
areaStyle: { normal: {} },
itemStyle: {
normal: {
color: "#489ae0",
lineStyle: {
color: "#489ae0"
}
}
},
data: [1, 6, 10, 16, 20, 25, 28, 32, 35, 39, 42, 46, 50, 54, 57, 65, 70, 73, 78, 81, 85, 89, 91, 93, 95, 99, 105, 109, 112, 120, 125],
smooth: true
}
]
};
3.title样式修改rich
var titles = [];
titles.push({
text: "PM2.5 PM10",
left: '0',
top:-7,
textStyle: {
fontSize: 28,
color: "white"
}
});
titles.push({
text: "(ug/m³)",
top:-2,
left:'200px',
textStyle: {
fontSize: 20,
color: "white"
}
});
var optionpm = {
title:titles,
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
4.折线图横向显示
var optionlwrymz = {
title: {
text: '劳务人员民族统计',
subtext: '',
x: 'left',
y: 'top',
textStyle: {
fontSize: 20,
//color: 'rgba(0,121,183,1)'
color: 'rgba(255,255,255,1)'
},
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var name=params[1].name+"<br/><span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#489ae0;'></span>"+params[1].seriesName+"："+params[1].value;
return name;
}
},
grid: {
left: '0%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
show: false,
splitLine: {
show: false
},
axisTick: {
alignWithLabel: false
}
}
],
yAxis: [
{
data: legendstrs,
axisLabel: {
formatter: '{value}',
margin: 40,
textStyle: {
align: 'left',
color: '#747b95',
baseline: 'middle'
}
},
type: 'category',
axisLine: {
show: false,
},
splitLine: {
show: false
}
}, {
data: datastrs,
axisLabel: {
formatter: '{value}',
margin: 20,
textStyle: {
align: 'left',
color: '#747b95',
baseline: 'middle'
}
},
type: 'category',
axisLine: {
show: false,
},
splitLine: {
show: false
}
}
],
series: [
{
name: '最大数据',
type: 'bar',
itemStyle: {
normal: {
color: '#1b1d35'
}
},
silent: true,
barWidth: '60%',
itemStyle: {
normal: { //柱状图颜色
color: '#1b1d35',
label: {
show: false, //显示文本
position: 'inside', //数据值位置
textStyle: {
color: '#fff',
fontSize: '14'
}
}
}
},
barGap: '-100%', // Make series be overlap
data: datastrsbf
},
{
name: '民族人数统计',
type: 'bar',
barWidth: '60%',
itemStyle: {
normal: { //柱状图颜色
color: '#489ae0',
label: {
show: false, //显示文本
position: 'right', //数据值位置
textStyle: {
color: '#fff',
fontSize: '14'
}
}
}
},
z: 10,
data: datastrs
}
]
};
