因工作需求须使用HTML+CSS纯手写一个大屏可视化页面。
其中涉及的echarts图表样式别致的，作下记录。
对比默认主要新增了渐变与控制背景间隔的样式，亏得写了一下午。
折线完成图：
PS：多看文档多看文档，没有捷径可走 [aru_49]
var class_situaction = echarts.init(document.getElementById("class_situaction"));
option = {
tooltip: {
trigger: 'axis',
formatter: '{a}: {c}<br/>{a1}:{c1}<br/>完成比例：50%',
textStyle: {
color: '#0066ff',
fontSize: 9
},
axisPointer: { //去掉移动的指示线
type: 'none'
},
backgroundColor: 'rgba(2,34,61,0.9)',
},
grid: {
left: '2%',
right: '5%',
bottom: '25%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: [
'1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
],
axisLabel: {
fontSize: '10px',
textStyle: {
color: '#fff',//坐标值的具体的颜色
},
interval: 0
},
axisLine: {
lineStyle: {
color: 'none'
}
},
}
],
yAxis: [
{
type: 'value',
scale: true,
max: 100,
min: 0,
interval: 25,
axisLabel: {
fontSize: '10px',
textStyle: {
color: '#fff'
},
},
axisLine: {
lineStyle: {
color: 'none'
}
},
//背景分割线
splitLine: {
lineStyle: {
color: ['rgba(4,166,255,0.24)']
}
}
}
],
series: [
{
name: '计划时',
type: 'line',
symbol: 'none',
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3ecbf2' // 0% 处的颜色
}, {
offset: 1, color: '#061328' // 100% 处的颜色
}],
global: false
},
}
},
lineStyle: {
color: "#44f0ff",
width: 0.4,
},
itemStyle: {
borderColor: '#44f0ff',
},
//线性渐变
data: [1, 32, 56, 13, 1, 3, 2, 35, 16, 34, 21, 8]
},
{
name: '已训时',
type: 'line',
symbol: 'none',
lineStyle: {
color: "#BF366C",
width: 0.8,
},
data: [2, 5, 1, 3, 56, 30, 10, 4, 11, 4, 33, 16],
},
]
};
class_situaction.setOption(option);
环形饼图：
var crew_out_chart = echarts.init(document.getElementById("crew_out_chart"));
placeHolderStyle = {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
}
}
};
option = {
title: {
//主标题
text: totalPerson+'人',
//主标题样式
textStyle: {
color: '#fff',
fontSize: 26,
fontWeight: 'normal'
},
left: 'center',
top: '50%'
},
tooltip: {
show: true,
trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
formatter: function (params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
return params.seriesName + ": " + params.value + "人";//系列名称：数据值
},
textStyle: {
color: '#0ab7ff',
fontSize: 15
},
backgroundColor: 'rgba(2,34,61,0.8)',
},
color: ['#0DDEDE', '#93E2A1', '#2E65FD', '#C88C0B'],//调色盘颜色列表，默认情况下图例和饼形环图颜色使用
series: [
{
name: '1类别',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [10, 19],
itemStyle: placeHolderStyle,
label: {
normal: {
show: false,
}
},
data: [{
value: wzOfficeUsers,
itemStyle: {
normal: {
color: '#0DDEDE'
}
}
},
{
value: totalPerson - wzOfficeUsers,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
},
{
name: '2类别',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [35, 38],
itemStyle: placeHolderStyle,
data: [{
value: ywbOfficeUsers,
itemStyle: {
normal: {
color: '#2E65FD'
}
}
},
{
value: totalPerson - ywbOfficeUsers,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
},
{
name: '3类别',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [70, 73],
itemStyle: placeHolderStyle,
data: [{
value: sgOfficeUsers,
itemStyle: {
normal: {
color: '#93E2A1'
}
}
},
{
value: totalPerson - sgOfficeUsers,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
},
{
name: '4类别',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [80, 83],
itemStyle: placeHolderStyle,
data: [{
value: gbOfficeUsers,
itemStyle: {
normal: {
color: '#C88C0B'
}
}
},
{
value: totalPerson - gbOfficeUsers,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
}
]
};
crew_out_chart.setOption(option);
},
});
本文作者为MingJun，转载请注明。