目录
一、类目名换行
具体效果见 柱状图->渐变->图-1 智能监控系统一列
xAxis: {
type: 'category',
data:['小学', '中学', '大学', '幼儿园', '医院', '福利院', '其他', '智能监控系统'],
axisLabel: {
color: '#ffffff',
// rotate: 40,
interval: 0,
// 类目名超过4个字换行
formatter : function(params){
let newParamsName = "";// 最终拼接成的字符串
let paramsNameNumber = params.length;// 实际标签的个数
let provideNumber = 4;// 每行能显示的字的个数
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";// 表示每一次截取的字符串
let start = p * provideNumber;// 开始截取的位置
let end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
三、柱状图
1、柱体渐变
图-1
drawLine() {
// 引入数据
let chartList = [8, 4, 7, 6, 5, 3, 3, 9];
let myChart = this.$echarts.init(this.$refs.test_bar);
let option = {
// 设置颜色组
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
// 设置渐变
colorStops: [{
offset: 0, color: 'rgba(51,244,164,0.7)'
}, {
offset: 1, color: 'rgba(51,244,164,0)'
}],
global: false
},
// 设置图例
legend: {
show: true,
left: 'right',
icon: 'circle',
textStyle: {
color: 'rgb(255,255,255)'
},
},
grid: {
top: '12%',
right: '2%',
bottom: '15%',
left: '10%'
},
xAxis: {
type: 'category',
data:['小学', '中学', '大学', '幼儿园', '医院', '福利院', '其他', '智能监控系统'],
axisLabel: {
color: '#ffffff',
// rotate: 40,
interval: 0,
// 类目名超过4个字换行
formatter : function(params){
let newParamsName = "";// 最终拼接成的字符串
let paramsNameNumber = params.length;// 实际标签的个数
let provideNumber = 4;// 每行能显示的字的个数
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";// 表示每一次截取的字符串
let start = p * provideNumber;// 开始截取的位置
let end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
min: 0,
max: 10,
interval: 2,
name: '场所/个数',
nameLocation: 'end',
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: false
// lineStyle: {
// color: 'rgba(196,177,252,0.37)',
// type: 'dashed'
// }
},
axisLabel: {
color: '#ffffff',
show: true
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
series: [
{
data: chartList,
name: '监控场所/个数',
type: 'bar',
barWidth: 15,
barCategoryGap: 0,
itemStyle: {
barBorderRadius: [10, 10, 5, 5]
}
},
]
};
option && myChart.setOption(option)
window.addEventListener("resize", function () {
myChart.resize();
});
}
2、极坐标的使用----半圆进度条
图-1
option = {
title: { // 中间标题、数据
text: '标题', // 标题
textStyle: {
color: '#28BCFE',
fontSize: '26px'
},
subtext: '副文本标题', // 副文本标题
subtextStyle: {
color: '#000',
fontSize: '22px'
},
itemGap: 20, // 标题间的距离
left: 'center',
top: '43%'
},
grid: [
{x: '7%', y: '7%', width: '33%', height: '100%'},
],
// 极坐标系的角度轴
angleAxis: {
// 起始角度,180 也可以是 225
startAngle: 180,
max: 360,
clockwise: true, // 逆时针
// 隐藏刻度线
show: false
},
// 极坐标系的径向轴
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '150%', //图形大小
},
series: [
// 上层数据
{
type: 'bar',
z: 2,
// 数值
data: [60],
showBackground: true,
backgroundStyle: {
color: 'transparent'
},
coordinateSystem: 'polar', // 使用极坐标系
roundCap: true,
barWidth: 10,
barGap: '-100%',
itemStyle: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#25BFFF'
}, {
offset: 1,
color: '#5284DE'
}],
shadowBlur: 5,
shadowColor: '#f92a2a'
}
}
},
// 底层背景色
{
type: 'bar',
z: 1,
// 需要的圆环跨度大小,可以是180,270等
data: [180],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
barGap: '-100%',
itemStyle: {
opacity: 1,
color: '#093368'
}
}
,
],
};
四、折线图
1、填充渐变
图-1
drawLine() {
let myLine = this.$echarts.init(this.$refs.line);
let option = {
color: ['rgb(255, 235, 0)','rgb(0,94,255)'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
textStyle: {
color: '#ffffff'
},
// itemStyle: {
// color: ['rgb(255, 235, 0)','rgb(0,94,255)']
// },
data: ['销售额', '利润']
},
toolbox: {
show: false
},
grid: {
left: '1%',
right: '2%',
bottom: '0%',
top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#b7b7b7'
}
},
axisLine: {
lineStyle: {
color: 'rgba(206,206,206,0.15)',//刻度线的颜色
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(49,49,49,0.56)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#b7b7b7'
}
},
axisLine: {
show:true,//是否显示轴线
lineStyle: {
color: 'rgba(206,206,206,0.15)',//刻度线的颜色
}
},
// 是否显示刻度线
axisTick: {
show: true
}
}
],
series: [
{
name: '销售额',
type: 'line',
smooth: true,
symbol:'circle',
colorBy: 'series',
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 235, 0,0.1)'
},
{
offset: 1,
color: 'rgba(255, 235, 0,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 232, 201, 204, 190, 140, 200,203, 212, 190, 234, 190]
},
{
name: '利润',
type: 'line',
smooth: true,
symbol:'circle',
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,94,255,0.1)'
},
{
offset: 1,
color: 'rgba(0,94,255,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: [190, 202, 211, 234, 220, 201, 234, 190, 181, 194, 190,200]
}
]
};
myLine.setOption(option);
window.onresize = function() {
myLine.resize();
};
}
2、叠加渐变
例图-要做到如下这样的效果
areaStyle:在series中设置面积区域
series: [ {
//这是一个颜色
areaStyle:{
color: 'pink'
}
//设置渐变色
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
}
}]
boundaryGap:在xAxis设置紧挨边缘
xAxis:{
type:"category",
data:xDataArr,
boundaryGap:false // 紧挨边缘
}
五、南丁格尔玫瑰图
1、半圆
图-1
option = {
legend: {
top: 'top'
},
toolbox: {
show: false
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: ['10%','70%'],
center: ['50%', '50%'],
// 设置角度
startAngle: 0,
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
// 最重要的是下面这里
{ value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
{ value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
{ value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
{ value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
{ value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
]
}
]
};
总结
暂未完结,后续遇到其他好看的图表会继续和大家分享,建议点赞+收藏+关注不迷路。