echarts笔记
一些奇怪的echarts样式实现记录,点击链接可以在echarts官网看到详情例子。
radar(雷达图)
- 渐变
代码解释:
// 径向渐变位置
var height = document.querySelector('#chart-panel').offsetHeight;
var width = document.querySelector('#chart-panel').offsetWidth;
var radiusMax = width >= height ? height : widht;
var data = {
title: '承办科室或社区(办结率)排名',
ratioData: [{
value: '95',
name: '1'
},
{
value: '90',
name: '党群工作办公室'
},
{
value: '85',
name: '3'
},
{
value: '63',
name: '4'
},
{
value: '48',
name: '5'
},
{
value: '35',
name: '6'
},
{
value: '32',
name: '7'
},
{
value: '26',
name: '8'
},
{
value: '17',
name: '民生保障办公室'
},
]
};//原始数据
var indicator = [];//雷达数据
var showData = [];//展示数据
if (data.title !== undefined) {
data.ratioData.map(item => {
indicator.push({
name: item.name,
max: 100
});
showData.push(Number(item.value));
});
}
option = {
backgroundColor:"#000",//背景色
title: {
text: `{title|${data.title}}`,
show: true,
backgroundColor: {
type: "linear",
colorStops: [{
offset: 0,
color: "#47b1b6"
}, {
offset: 1,
color: "transparent"
}]//标题渐变
},
textStyle: {
color: "#fff",
rich: {
title: {
color: "#fff",
fontSize: 18,
width: width,
}
}
},
},//标题
radar: {
indicator: indicator,
shape: "circle",//形状
center: ["50%", "53%"],//位置
radius: "85%",//大小
splitNumber: 5,//刻度
splitArea: {
areaStyle: {
color: ["transparent"]//背景透明
}
},
splitLine: {
show: true,
lineStyle: {
opacity: 1,
color: "#263c5f",
width: 3,
}
},
axisLine: {
show: false,
},
name: {
show: false,
}
},//雷达图数据
series: [{
name: data.title,
type: "radar",
symbolSize: 0.1,
areaStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.RadialGradient(width / 2, height / 2, radiusMax * 0.3, [{
offset: 0,
color: 'rgb(61, 171, 204,0.2)'
}, {
offset: 1,
color: 'rgb(61, 171, 204,1)'
}], true),
}//渐变
},
lineStyle: {
width: 0,
},
label: {
normal: {
show: true,
position: "top",
formatter: (params) => {
let dataIndex = params.data.indexOf(params.value);
let rang = `NO.${dataIndex+1}`;
let value = `${params.value}%`;
let name = indicator[dataIndex].name;
let text = '';
if (dataIndex < 3) {
text = `{value|${value}}{rang|${rang}}{name|${name}}`;
} else {
text = `{name|${name}}{value|${value}}`;
}
return text;
},
rich: {
rang: {
color: "#02ba5f",
fontSize: 16,
},
value: {
color: "#00FFFF",
fontWeight: 700,
fontSize: 16,
},
name: {
color: "#fff",
padding: [0, 5],
fontSize: 14
}
}
}
},
data: [showData],
}]
};
var chart = document.getElementById('chart-panel');
echarts.init(chart);
柱状图
- 动态数据
动态柱状图分为两种,一每次添加一个数据,柱状图呈现滚动效果,二每隔一段时间替换一次所有数据,柱状图呈现消失生成效果。两者大同小异,都是为柱状图设置一个定时器,间隔刷新数据。代码简单易懂,我就不解释了。
var provincialData=[
{id: "089", name: "新疆", value: 0},
{id: "088", name: "宁夏", value: 0},
{id: "070", name: "青海", value: 0},
{id: "087", name: "甘肃", value: 0},
{id: "084", name: "陕西", value: 0},
{id: "079", name: "西藏", value: 0},
{id: "086", name: "云南", value: 0},
{id: "085", name: "贵州", value: 0},
{id: "081", name: "四川", value: 0},
{id: "083", name: "重庆", value: 0},
{id: "050", name: "海南", value: 0},
{id: "059", name: "广西", value: 0},
{id: "051", name: "广东", value: 0},
{id: "074", name: "湖南", value: 0},
{id: "071", name: "湖北", value: 0},
{id: "075", name: "江西", value: 0},
{id: "038", name: "福建", value: 0},
{id: "030", name: "安徽", value: 0},
{id: "036", name: "浙江", value: 0},
{id: "034", name: "江苏", value: 0},
{id: "031", name: "上海", value: 0},
{id: "000", name: "", value: 0},
{id: "076", name: "河南", value: 0},
{id: "017", name: "山东", value: 0},
{id: "097", name: "黑龙江", value:0},
{id: "090", name: "吉林", value: 0},
{id: "091", name: "辽宁", value: 0},
{id: "010", name: "内蒙古", value: 0},
{id: "019", name: "山西", value: 0},
{id: "018", name: "河北", value: 0},
{id: "013", name: "天津", value: 0},
{id: "011", name: "北京", value: 0}
];
option = {
backgroundColor:"#000",
grid:[{
y2:"60%",
},{
y:"42%",
}],
xAxis: [
{
type: 'category',
show:false,
boundaryGap: true,
gridIndex:0,
data: (()=>{
const res = [];
for (let len=0;len<30;len+=1) {
res.push(len);
}
return res;
})()
},{
type: 'value',
show: false,
gridIndex:1,
boundaryGap: [0, 0.2],
}
],
yAxis: [
{
type: 'value',
scale: true,
show:false,
gridIndex:0,
boundaryGap: [0, 0.2]
},{
type: 'category',
gridIndex:1,
data: provincialData.map(item=>item.name),
axisTick: {
show:false,
},
axisLine: {
show:false,
},
axisLabel: {
show: true,
color: '#fff',
interval:0
}
}
],
series: [
{
name:'',
type:'bar',
barWidth:12,
xAxisIndex:0,
yAxisIndex:0,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data:( ()=>{
const res = [];
for (let len=30;len>0;len-=1) {
res.push(0);
}
return res;
})()
},{
barWidth: 12,
type: 'pictorialBar',
symbol: 'roundRect',
xAxisIndex:1,
yAxisIndex:1,
symbolRepeat: true,
symbolSize: [12, 8],
itemStyle: {
normal: {
barBorderRadius: [0,30,30,0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data: provincialData.map(item=>item.value),
}
]
};
setInterval(()=>{
const axisData = option.xAxis[0].data;
option.series[0].data.shift();
option.series[0].data.push(Math.random()*1000);
option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData[axisData.length-1]+1);
for(var i=0;i<provincialData.length;i++){
if(provincialData[i].name!==''){
provincialData[i].value=Math.random()*1000;
}
}
option.series[1].data=provincialData;
myChart.setOption(option);
}, 300);
散点图
- 分块
主要是markPoint的使用:
// 以该点[xValue,yValue]为中心划分
// Number.MAX_VALUE为数据最大值
markArea: {
zlevel: 0,
silent: true,
data: [
[{
// 右下
name: "低发展、高流失",
itemStyle: {
color: "#e0f8ed"
},
label: {
show: true,
position: ["30%", "50%"],
fontStyle: "normal",
color: "#66cc66",
fontSize: 14
},
coord: [xValue, yValue]
},
{
coord: [Number.MAX_VALUE, 0]
}
],
[{
//做下
name: "低发展、低流失",
itemStyle: {
color: "#fef0e0"
},
label: {
show: true,
position: ["10%", "50%"],
fontStyle: "normal",
color: "#66cc66",
fontSize: 14
},
xAxis: 0,
yAxis: 0
},
{
xAxis: xValue,
yAxis: yValue
}
],
[{
// 右上
name: "高发展、高流失",
itemStyle: {
color: "#ffebe9"
},
label: {
show: true,
position: ["30%", "10%"],
fontStyle: "normal",
color: "#66cc66",
fontSize: 14
},
xAxis: xValue,
yAxis: yValue
},
{
xAxis: Number.MAX_VALUE,
yAxis: Number.MAX_VALUE
}
],
[{
// 左上
name: "高发展、低流失",
itemStyle: {
color: "#eee5fe"
},
label: {
show: true,
position: ["10%", "10%"],
fontStyle: "normal",
color: "#66cc66",
fontSize: 14
},
xAxis: 0,
yAxis: Number.MAX_VALUE
},
{
xAxis: xValue,
yAxis: yValue
}
]
]
},