工作中写过的echarts,做个记录
1.折线图,折线点设置边框,加上y轴边框,更改网格颜色![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/388041ab406bd4a85222a3a62db03cb4.png)
代码如下
option = {
tooltip: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018', '2019', '2020', '2021', '2022'],
axisLabel: {
interval: 0, // x轴内容过多会隐藏部分内容,这样可以显示隐藏掉的内容
inside: false,
textStyle: {
color: '#fff', // 字体颜色
fontSize: '12' // 字体大小
}
},
axisLine: {
show: true, //是否显示轴线
lineStyle: {
color: '#234F88' //刻度线的颜色
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: '人数', // 这个设置只在末尾添加单位
nameTextStyle: {
//y轴上方单位的颜色
color: '#4160AE'
},
axisLabel: {
interval: 0, // x轴内容过多会隐藏部分内容,这样可以显示隐藏掉的内容
inside: false,
textStyle: {
color: '#fff', // 字体颜色
fontSize: '12' // 字体大小
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#184070'], // 这里设置网格颜色
width: 1,
type: 'solid'
}
},
axisLine: {
show: true, //是否显示轴线
lineStyle: {
color: '#234F88' //刻度线的颜色
}
}
},
series: [
{
data: [820, 200, 934, 1290, 1330],
type: 'line',
areaStyle: {},
symbol: 'circle',
symbolSize: 7, //设定实心点的大小
itemStyle: {
normal: {
color: 'ffffff', //改变折线点的颜色.
borderColor: '#ffffff49',
borderWidth: 8,
lineStyle: {
color: '#12C8EF' //改变折线颜色
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(19,201,238,0.8)'
},
{
offset: 1,
color: 'rgba(19,201,238,0.3)'
}
])
}
}
],
// 调整grid属性
grid: {
top: '15%',
left: '10%',
right: '5%',
bottom: '11%'
}
};
2.环形饼图,每个饼图之间有间隔,可使用css引入的字体,自定义颜色
代码如下
let data = [
{ value: 10, name: '拔丝地瓜' },
{ value: 10, name: '荔枝肉' },
{ value: 10, name: '慕斯蛋糕' },
{ value: 10, name: '菠萝咕噜肉' },
{ value: 10, name: '苦瓜炒蛋' }
]
let colorList = ['#3B6BD9', '#D9AF85', '#1B8AD1', '#FF4E4E', '#6248B3', '#36CFDF', '#FD4D8E', '#49A4D0', '#31F5B5']
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
borderColor: '#00224B',
borderWidth: 3,
color: function (colors) {
return colorList[colors.dataIndex]
},
},
},
data: data.map((item, i) => {
item.label = {
color: colorList[i],
formatter: "{b} \n{d} % ",
fontSize: 14,
fontFamily: 'youyuan', // css中引入的字体
}
return item
}),
}
],
};
3. 南丁格尔玫瑰图,两个图形进行叠加,比较特别的饼图,形状有点像西瓜。
代码如下:
let BookColorList = ['#09B3E7', '#47AAA1', '#FAC2F8', '#C9A353',]
let bookData = [
{ value: 40, name: '华硕' },
{ value: 23, name: '联想' },
{ value: 58, name: '小米' },
{ value: 62, name: '华为' },
]
option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
data: [
'华硕',
'联想',
'小米',
'华为',
],
textStyle: { //图例文字的样式
color: function (colors) {
return BookColorList[colors.dataIndex]
},
fontSize: 13,
},
itemWidth: 6, //图例颜色块的宽度和高度
itemHeight: 6,
icon: "circle", // 图例前的图标为圆点
top: 0,
itemGap: 20
},
series: [
{
type: 'pie',
silent: true, // 鼠标无操作
radius: ['0', '70%'],
center: ['50%', '58%'],
roseType: 'radius',
itemStyle: {
normal: {
color: function (colors) {
return BookColorList[colors.dataIndex];
}
}
},
label: {
show: true
},
data: bookData.map((item, i) => {
item.label = {
color: BookColorList[i],
formatter: "{d} % ",
fontSize: 15
}
return item
}),
labelLine: {
normal: {
length: 0,
length2: 0,
show: false // 隐藏所有指示线
}
},
},
{
type: 'pie',
radius: ['0%', '63%'],
center: ['50%', '58%'],
roseType: 'radius',
itemStyle: {
normal: {
color: '#1C3949',
borderWidth: 2,
borderColor: '#00224B',
}
},
data: bookData,
label: {
show: false
},
},
],
};
option && myChart.setOption(option);
4.串行柱形图
代码如下:
let data = {
联想: 120,
红米: 222,
小米: 150,
华硕: 111,
宏碁: 141
};
let bardata = [];
let title = [];
for (let i in data) {
bardata.push(data[i]);
title.push(i);
}
let maxBarList = [];
let maxBar = Math.max(...bardata); // 数组最大值
if (maxBar % 50 == 0) {
maxBarList = new Array(bardata.length).fill(maxBar);
} else {
let r = maxBar + 50 - (maxBar % 50); // 白线补充
maxBarList = new Array(bardata.length).fill(r);
}
option = {
backgroundColor: '#081034',
xAxis: {
type: 'category',
data: title,
axisLine: {
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#0B2C57'], // 这里设置网格颜色
width: 0,
type: 'solid'
}
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff' //更改坐标轴文字颜色
}
}
},
series: [
{
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#24DDFF' },
{ offset: 1, color: '#0A6AB7' }
])
}
},
symbolRepeat: true,
symbolSize: [12, 6],
symbolMargin: 2,
z: 15,
data: bardata
},
{
type: 'bar',
barWidth: 1,
itemStyle: {
color: '#fff'
},
data: maxBarList,
z: 14
}
],
grid: {
top: '5%',
left: '10%',
right: '5%',
bottom: '8%'
}
};
5.环形柱形图
代码:
let seriesDatum = [59, 24, 30, 60, 72]
let symbolArray = ['苹果', '菠萝', '橙子', '凤梨', '桃子']
let markPointDatum = []
var xFontcolor = ['#BD2020', '#E57D37', '#EBBE35', '#12ADBD', '#8274D0']
option = {
title: [
{
text: ''
}
],
polar: {
radius: [10, '90%']
},
angleAxis: {
show: false, // 角度x轴刻度线
max: 100, // 圆环最大值
startAngle: 90, // 圆环开始绘制的位置,90度为12点的位置
},
radiusAxis: {
type: 'category',
data: symbolArray,
show: true,
axisLabel: {
show: true, // x轴刻度文本
interval: 0, // x轴内容过多会隐藏部分内容,这样可以显示隐藏掉的内容,
textStyle: {
color: function (value, index) { // 设置多种颜色
return xFontcolor[index]
},
fontSize: 10
},
},
axisTick: {
show: false
},
axisLine: {
show: false // x轴刻度分割线
},
z: 25,
},
tooltip: {},
series: [
{
type: 'bar',
data: seriesDatum,
coordinateSystem: 'polar',
roundCap: true,
barWidth: 5,
label: {
show: true,
position: 'middle', // 柱体文字对齐方式
// offset: [3, -6], // 文字偏移量
align: 'top',
formatter: '{c}%',
textStyle: {
color: '#fff', // 字体颜色
fontSize: '10', // 字体大小
}
},
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
{
offset: 0, color: '#2397F6' // 0% 处的颜色
},
{
offset: 1, color: '#0ECDEE' // 100% 处的颜色
},
],
global: false // 缺省为 false
}
}
},
z: 15,
},
{
type: 'bar',
barWidth: 1,
coordinateSystem: 'polar',
roundCap: true,
data: [100, 100, 100, 100, 100],
z: 14,
barGap: '-50%'
},
],
};
6.仪表盘改造成进度条
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: 50,
name: ''
}
],
axisTick:{
show:false, // 刻度是否显示
},
splitLine:{
show:false // 分隔符是否显示
},
axisLabel:{
show:false // 数字是否显示
},
pointer:{
show:false
},
detail:{
show:false // 数据是否显示
}
}
]
};