Echarts笔记

已于 2023-11-13 13:36:12 修改
阅读量496 收藏 2
点赞数
文章标签： echarts 学习 前端
于 2022-08-31 08:57:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44164945/article/details/126603345
版权 
import Echarts from 'echarts';
let colorArr = ["#EB5940", "#FFAA53", "#4091FD", "#2EBA89"];
let colorLevel = ['#ff5b5b', '#f9d78f', '#83c3ff', '#c0a8ce', '#7dd8e8', '#f19ec2', '#c2ce5a', '#b6d86d'];

配置项

1. title 图表标题
// 图表标题
title: {
    show: true,
    text: "主标题文本",
    link: "主标题文本链接",
    subtext: "副标题文本",
    sublink: "副标题文本链接"
},
2. grid 网格线
// 网格线  图形尺寸 位置
grid: {
    show: false,	// 四周网格线
    borderColor: "#ff9700",	// 线颜色
    borderWidth: 10,		// 线宽度
    width: 400,		// 图形宽
    height: 400,	// 图形高
    left: "30%",	// 左边
    top: "20%",		// 上边
},
3. tooltip 图形提示框
// 图形提示框,
tooltip: {
    show: true,
    backgroundColor: "#ffffff",
    textStyle: {
        color: "#ff9700",
        fontSize: 16,
    },
    formatter: "{b} {c}",
},
4. legend 图形标记
// 图形标记（必须配合series的name使用）
legend: {
    data: ['101'],
    width: 100,
    height: 100,
    left: "48%",
    top: 10,
    orient: "horizontal", // 布局方式：horizontal 横向   vertical 纵向
    itemWidth: 45,	// 标记宽
    itemHeight: 3,	// 标记高
    icon: "circle", // 图标'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
},
5. xAxis x轴
// (solid:实线  dashed:虚线  dotted:虚线)
xAxis: {
    type: 'category',
    data: [10,20,30,40,50,60,70],   // 数据
    position: "bottom",    // x轴在图形的位置（top:图形的上方  bottom:图形的下方）
    offset: 0,  // 距离轴线的偏移（上下偏移）
    name: "日期",   // 轴线尾部的name
    nameLocation: "end",    // name的位置
    nameTextStyle: {        // name的样式
        color: "#ff9700",
        fontSize: 20,
        backgroundColor: "#000",// 背景色
        borderColor: "#ff0000", // 边框颜色
        borderWidth: 2,         // 边框宽
        borderRadius: 4         // 圆角
    },
    nameGap: 20,    // name和轴线的距离
    nameRotate: 90, // name旋转
    inverse: false, // 是否反向显示坐标轴
    scale: true,    // 是否强制包含0刻度
    minInterval: 1, // 最小间隔
    maxInterval: 2, // 最大间隔
    interval: 2,    // 强制间隔
    silent: true,   // 坐标轴是否是静态(鼠标变手状)(默认是静态)
    triggerEvent: false, // 是否响应鼠标触发事件(默认不响应)
    axisLine: {     // 坐标轴轴线样式
        symbol: ["arrow", "1"], // 首尾箭头（none：不显示  arrow：显示  字符串：显示不是箭头）
        symbolSize: [10,20],    // 箭头大小（[0]:高度  [1]:宽度）
        symbolOffset: [-20,20], // 箭头偏移（[0]:首部箭头偏移  [1]:尾部箭头偏移）
        lineStyle: {
            color: "#ff9700",   // 轴线的颜色
            width: 2,           // 轴线的宽度
            type: "dashed",     // 轴线的类型
        },
    },
    axisTick: {             // 轴线刻度
        inside: true,       // 刻度是否朝内
        length: 10,         // 刻度长度
        lineStyle: {        // 刻度样式
            color: "#000",  // 刻度线颜色
            width: 10,      // 刻度线宽度
        }
    },
    minorTick: {            // 次刻度线(type:category 无效)
        show: true,
    },
    axisLabel: {        // 刻度标签(默认显示)
        inside: true,   // 刻度标签是否朝内
        rotate: 10,     // 刻度标签旋转
        margin: 20,     // 刻度标签边距
        formatter: function(value, index){
            return  value + "-" + index;
        },
        color: "#ff0000",       // 刻度标签颜色
        fontSize: 16,           // 刻度标签大小
        align: "center",        // 刻度标签文本水平对齐
        verticalAlign: "top",   // 刻度标签文本垂直对齐
        backgroundColor: "#000",// 刻度标签背景色
        borderColor: "#ff0000", // 刻度标签边框色
        borderWidth: 2,         // 刻度标签边框线框
        borderRadius: 4,        // 刻度标签边框圆角
        padding: [5,2,2,2],             // 刻度标签内边距
    },
    splitLine: {
        show: true,         // x轴内部网格线(类目默认不显示)
        lineStyle: {        // 网格线样式
            width: 1,
            color: "#ff0000",
            type: "solid",
        },
    },
    splitArea: {        // 分割区域（隔一列一个颜色）
        show: true,
        areaStyle:{     // 分割区域样式
            color: ["#eeeeee", "#e0e0e0"],

        }
    },
    axisPointer: {      // 坐标轴指示器（随着鼠标移动的竖线，默认不显示，样式继承）
        show: true,
        type: "shadow", // 类型（line:一根线  shadow:区域  none:无）
        label: {
            show: true, // 标签
            formatter: function(params){
                return params.value;
            },
            margin: 200,// 标签距离轴线的距离
            color: "#ff9700",
            fontSize: 16,
            backgroundColor: "#ffffff"
        },
        lineStyle: {},  // type:line 时设置
        shadowStyle: {},// type:shadow 时设置
        handle: {       // 拖拽手柄
            show: true,
            icon: "image://https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg",
            size: [40,40],
            margin: 40, // 手柄中心点距离轴线的距离
        }
    }
},
6. axisPointer 标轴指示器
axisPointer: {      // 坐标轴指示器（随着鼠标移动的竖线，默认不显示，样式继承）
    show: true,
    type: "shadow", // 类型（line:一根线  shadow:区域  none:无）
    label: {
        show: true, // 标签
        formatter: function(params){
            return params.value;
        },
        margin: 200,// 标签距离轴线的距离
        color: "#ff9700",
        fontSize: 16,
        backgroundColor: "#ffffff"
    },
    lineStyle: {},  // type:line 时设置
    shadowStyle: {},// type:shadow 时设置
    handle: {       // 拖拽手柄
        show: true,
        icon: "image://https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg",
        size: [40,40],
        margin: 40, // 手柄中心点距离轴线的距离
    }
}

柱形图 (成绩对比)

ResultsContrast: {
		silent: true,
		grid: {
			width: '100%',
			height: '80%',
			left: '1%',
			containLabel: true
		},
		xAxis: [{
			type: "category",
			data: ["全市", "全校", "班级"],
			axisLine: {
				lineStyle: {
					color: "#e8e8e8",
					width: 1
				}
			},
			axisTick: {
				show: false
			},  
			axisLabel: {
				color: "#333333",
				fontSize: 18,
				margin: 19
			}
		}],
		yAxis: [{
			type: "value",
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: "#e8e8e8",
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: "#666666",
				fontSize: 18,
				margin: 18
			}
		}],
		series: [{
			name: "最高分",
			type: "bar",
			barGap: 1.9,
			barWidth: 12,
			itemStyle: {
				normal: {
					barBorderRadius: 6,
					// 不同柱形图的颜色
					color: function (params){
						return colorArr[params.dataIndex];
					}
				}
			},
			label: {
				position: "top",
				show: true,
				padding: 5,
				color: "#ec3e3d",
				fontWeight: "bold",
				fontSize: 16,
				backgroundColor: {
					image: require("../../assets/images/home_bg_fractions.png")
				}
			},
			data: []
		},
		]
	},

折线图 柱形图 (区间分布)

IntervalDistribution: {
		textStyle: {
			fontFamily: 'SourceHanSansCN-Regular'
		},
		tooltip: {},
		grid: {
			left: '2%',
			width: '95%',
			height: '70%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: [],
			axisLine: {
				lineStyle: {
					color: '#BEBEBE',
					width: 1,
				}
			},
			axisLabel: {	//x轴标签
				fontSize: 16,
				margin: 15,
				color: '#666666'
			},
			axisTick: {
				show: false
			},
			name: '分数',
			nameTextStyle: {
				fontSize: 14,
				fontWeight: "400",
				color: '#333333',
				padding: [40, 0, 0, 0]
			}
		},
		yAxis: [{
			type: 'value',
			axisLabel: { 	// y轴轴线
				fontSize: 16,
				color: '#666666',
				margin: 15,
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1,
				}
			},
			splitLine: {
				show: false
			},
			name: '人数',
			nameTextStyle: {
				fontSize: 14,
				fontWeight: "normal",
				color: '#333333',
				padding: [0, 58, 15, 0]
			}
		},
		{
			type: 'value',
			axisLabel: {
				fontSize: 16,
				color: '#666666',
				margin: 15,
				formatter: '{value}%'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1,
				}
			},
			splitLine: {
				show: false
			}
		}],
		series: [
			// 柱子
			{
				itemStyle: {
					barBorderRadius: 5,
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [  // 柱形图颜色 (多个颜色可以渐变)
							{
								offset: 1,
								color: '#59A1FF'
							}
						],
					},
				},
				label: {	// 柱形图标签
					show: true,
					position: 'top',
					fontSize: 14,
					color: '#59A1FF',
					// borderColor: '#ffad1f',
					// borderWidth: 1,
					// padding: [3,4,2,4],
					// borderRadius: 5
				},
				type: 'bar',
				barWidth: 10,
				data: [],
				tooltip: {
					show: false
				},
			},
			// 折线
			{
				type: 'line',
				yAxisIndex: 1,
				connectNulls: true,
				color: '#3061FF',
				symbol: 'circle',
				symbolColor: '#3061FF',
				symbolSize: 6,
				data: [],
				// 线
				lineStyle: {
					width: 1,
				},
				// 标签
				tooltip: {
					show: true,
					backgroundColor: '#ffffff',
					borderColor: '#3061FF',
					borderWidth: 1,
					padding: [5, 14, 5, 14],
					textStyle: {
						color: '#3061FF'
					},
					formatter:function (parms){
						return '<div style="width:10px;height:10px;border-radius:50%;background-color: #3061FF;display:inline-block;margin-right: 6px;"></div> ' + parms.name + " " + parms.value;
					}
				}
			}
		]
	},

雷达图 (学科素养)

CoreLiteracy: {
		color: ['#CE2378', '#31AFC3', '#8CBB29'],
		tooltip: {
			formatter: function (params){
				let color = ['#CE2378', '#31AFC3', '#8CBB29'];
				return `<span style="display:inline-block;width:10px;height:10px;background-color:${color[params.seriesIndex]};border-radius:50%;"></span>
				<span>${params.name} ${params.value[params.seriesIndex]}</span>`;
			},
		},
		legend: {
			textStyle: {
				fontSize: 14,
				color: '#333333'
			}
		},
		grid: {
			top: 30,
			left: 0,
			right: 0,
			bottom: 0,
			containLabel: true
		},
		radar: {
			splitNumber: 4,
			// 标签 {name:"", value:100}
            // ** 必须有一个数据，否则报错 **
			indicator: [{name:"", value:100}],
			name: {
				textStyle: {
					color: '#F6C45F',
					fontSize: 16,
					backgroundColor: '#ffffff',
					borderRadius: 3,
					padding: [3,5]
				},
                // 换行
                formatter: function (text) {
					text = text.replace(/\S{4}/g, function (match) {
						return match + '\n';
					});
					return text;
				}
			},
			radius: 130,
			// 背景渐变色
			splitArea: {
				areaStyle: {
					color: (function () {
						let colors = [];
						for(let i = 0;i < 4;i++) {
							colors.push(new Echarts.graphic.RadialGradient(
								0.5, 0.5, 1.0,
								[{
									offset: 0.5,
									color: 'rgba(248, 243, 234,1)'
								},{
									offset: 0.4,
									color: '#fff'
								}]
							),);
						}
						return colors;
					})()
				},
				splitLine: {
					lineStyle: {
						color: '#ddd'
					}
				}
			}
		},
		series: [
			{
				type: 'radar',
				symbolSize: 0,
				data: [{
					value: [],
					name:''
				}],
				// 拐点
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#CE2378',
						}
					}
				},
                // 线
                lineStyle: {
					normal: {
						color: '#ecc03e',
						width: 2
					}
				},
			},
			{
				type: 'radar',
				symbolSize: 0,
				data: [{
					value: [],
					name:''
				}],
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#31AFC3',
						}
					}
				}
			},
			{
				type: 'radar',
				symbolSize: 0,
				data: [{
					value: [],
					name:''
				}],
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#8CBB29',
						}
					}
				}
			},
		]
	},

柱形图叠加 (学科等级对比图)

levelContrast: {
		textStyle: {
			fontFamily: 'Regular-font'
		},
		color: colorLevel,
		grid: {
			top: '3%',
			left: 0,
			right: 0,
			containLabel: true
		},
		tooltip: {},
		xAxis: {
			type: 'category',
			name: "班级",
			nameLocation: 'end',
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1,
				}
			},
			axisLabel: {
				fontSize: 16,
				margin: 15,
				color: '#323333'
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: false
			},
			splitArea: {
				show: false
			},
			data: []
		},
		yAxis: [{
			type: 'value',
			axisLabel: {
				fontSize: 16,
				color: '#666666',
				margin: 15,
				formatter: function (value) {
					var x = value.valueOf();
					return x + '%';
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1,
				}
			},
			splitLine: {
				show: true
			},
			min: 0,
			max: 100,
			interval: 10	// y轴分割间隔
		}],
		series: []
	},

折线图 (试卷概况)

rank_singlesubject: {
		color: ['#EFB052', '#4091FD'],
		tooltip: {
			show: true,
			trigger:'item',
			transitionDuration: 0,
			position: 'top'
		},
		// 图表设置
		grid: {
			containLabel: true,
			// bottom: '5%',
			top: '18%',
			right: '3%',
			left: '1%'
		},
		xAxis: {
			type: "category",
			data: [],
			axisLine: {
				show: false
			},
			axisLabel: {
				fontSize: 16,
				margin: 27,
				color: "#666666",
				interval: 0,	//坐标轴间隔
				rotate: -30		//斜体
			},
			// x轴刻度
			axisTick: {
				show: false
			},
		},
		yAxis: {
			// name: "名次",
			scale: true,
			minInterval: true,
			inverse: false,
			nameLocation: 'end',
			type: "value",
			// max: 70,
			interval: 0.5,
			nameTextStyle: {
				fontSize: 20,
				padding: [0, 60, 25, 0],
				color: "#666666"
			},
			axisLabel: {
				fontSize: 16,
				color: '#666666',
				margin: 15,
				formatter: function (value) {
					var x = value.valueOf();
					return x;
				}
			},
			splitLine: {
				lineStyle: {
					color: '#E3E3E3'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			}
		},
		// 滚动条
		// dataZoom: {
		// 	realtime: true,
		// 	height: 10,
		// },
		series: [
			{
				// name: "难度",
				type: "line",
				symbolSize: 10,
				lineStyle: {		//线
					width: 1
				},
				data: [],
				tooltip: {
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: '#EFB052',
					borderWidth: 1,
					textStyle:{
						color: '#EFB052',
						fontSize: 14,
						lineHeight: 18
					},
					formatter:function (params){
						return '<div>题号: ' + params.name + '<br />难度 : ' + params.data + '</div>';
					}
				}
			},
			{
				// name: "区分度",
				type: "line",
				symbolSize: 10,
				lineStyle: {		//线
					width: 1
				},
				data: [],
				tooltip: {
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: '#4091FD',
					borderWidth: 1,
					textStyle:{
						color: '#4091FD',
						fontSize: 14,
						lineHeight: 18
					},
					formatter:function (params){
						return '<div>题号: ' + params.name + '<br />区分度 : ' + params.data + '</div>';
					}
				}
			}
		]
	},

饼图 (知识点占比级难度分析)

knowledge_difficulty: {
		tooltip: {
			trigger:'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			left: 10,
			data: []
		},
		animation: false,
		series: [
			{
				name:'知识点',
				type:'pie',
				// selectedMode: 'single',	//凸出动画
				radius: ['40%', '70%'],
				color: ['#78C446','#F9CD33','#FF5F3F','#4FC5EA'],
				label: {
					show: false
				},
				data:[],
				tooltip: {
					trigger:'item',
					formatter: '{a}<br/>{b}: {c} ({d}%)'
				},
			},
			{
				name:'难度',
				type:'pie',
				radius: ['70%', '100%'],
				color: ['#bbd9ff','#87BBFF','#59A1FF'],
				label: {
					show: false
				},
				data:[],
				tooltip: {
					trigger:'item',
					formatter: '{a}<br/>{b}: {c} ({d}%)'
				},
			}
		]
	},

平均分 (盒须图)

var data = echarts.dataTool.prepareBoxplotData([
    [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
    [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
    [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
    [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
]);

var averageByMonth = [1070, 960, 940, 950];//上
var averageByMonth1 = [940, 845, 855, 810];//中
var averageByMonth2 = [655, 760, 780,740];//下
var avg = [955,840,840,860];
 
function renderAverageItem(param, api) {
    var bandWidth = api.size([0, 0])[0] * 0.85;
    var point = api.coord([api.value(0), api.value(1)]);
 
    return {
        type: 'line',
        shape: {
            x1: point[0] - 26,
            y1: point[1],
            x2: point[0] + 26,
            y2: point[1]
        },
        style: api.style({
            fill: null,
            stroke: api.visual('color'),
            lineWidth: 2
        })
    };
}
// 平均分 (加号)
function renderAverageItem2(param, api) {
    var bandWidth = api.size([0, 0])[0] * 0.85;
    var point = api.coord([api.value(0), api.value(1)]);
 
    return {
        type: 'line',
        shape: {
            x1: point[0] - 8,
            y1: point[1],
            x2: point[0] + 8,
            y2: point[1]
        },
        style: api.style({
            fill: null,
            stroke: api.visual('color'),
            lineWidth: 1,
        })
    };
}
// 平均分 (加号)
function renderAverageItem3(param, api) {
    var bandWidth = api.size([0, 0])[0] * 0.85;
    var point = api.coord([api.value(0), api.value(1)]);
 
    return {
        type: 'line',
        shape: {
            x1: point[0],
            y1: point[1] - 8,
            x2: point[0],
            y2: point[1] + 8
        },
        style: api.style({
            fill: null,
            stroke: api.visual('color'),
            lineWidth: 1
        })
    };
}
// 中线 (虚线)
function renderAverageItem4(param, api) {
    var bandWidth = api.size([0, 0])[0] * 0.85;
    var point = api.coord([api.value(0), api.value(1)]);
 
    return {
        type: 'line',
        shape: {
            x1: point[0] - 26,
            y1: point[1],
            x2: point[0] + 26,
            y2: point[1]
        },
        style: api.style({
            fill: null,
            stroke: api.visual('color'),
            lineWidth: 1
        })
    };
}

option = {
    color: ['#59a1ff'],
    animation: false,
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        name: '班级',
        nameTextStyle: {
            color: '#666666'
        },
        data: ["48", "49", "学校", "市"],
        boundaryGap: true,
        // 网格背景色
        splitArea: {
            show: false
        },
        // 网格线
        splitLine: {
            show: false,
        },
        // 轴线
        axisLine: {
            show: true,
            lineStyle: {
                color: '#DEDEDE'
            }
        },
        // 轴线刻度
        axisTick: {
            show: false
        },
        // x轴标签
        axisLabel: {
            show: true,
            color: '#323333'
        },
    },
    yAxis: {
        type: 'value',
        name: '分数',
        nameTextStyle: {
            color: '#666666'
        },
        // 网格背景色
        splitArea: {
            show: false
        },
        // 网格线
        splitLine: {
            show: false,
        },
        // 轴线
        axisLine: {
            show: true,
            lineStyle: {
                color: '#DEDEDE'
            }
        },
        // y轴标签
        axisLabel: {
            show: true,
            color: '#323333'
        }
    },
    series: [
        {
            name: 'boxplot',
            type: 'boxplot',
            data: data.boxData,
            itemStyle: {
                color: '#59a1ff',
                borderWidth: 1
            },
            tooltip: {
                formatter: function (param) {
                    return [
                        '名称 ' + param.name,
                        '上边界: ' + param.data[5],
                        '下四分位数: ' + param.data[4],
                        '中位数: ' + param.data[3],
                        '上四分位数: ' + param.data[2],
                        '下边界: ' + param.data[1]
                    ].join('<br/>');
                }
            }
        },
        {
            type: 'custom',
            name: '上临近值',
            hoverAnimation: false,
            renderItem: renderAverageItem,
            encode: {
                x: 0,
                y: 1
            },
            itemStyle: {
                color: '#EB5940'
            },
            zlevel: 1,
            data: averageByMonth
        },
        // 平均分 (加号)
        {
            type: 'custom',
            name: ' ',
            silent: true,
            renderItem: renderAverageItem2,
            encode: {
                x: 0,
                y: 1
            },
            itemStyle: {
                color: '#FFCB5A'
            },
            zlevel: 1,
            data: averageByMonth1
        },
        {
            type: 'custom',
            name: '',
            silent: true,
            renderItem: renderAverageItem3,
            itemStyle: {
                color: '#FFCB5A'
            },
            zlevel: 1,
            data: averageByMonth1
        },
        
        // 中线 (虚线)
        {
            type: 'custom',
            name: '',
            silent: true,
            renderItem: renderAverageItem4,
            itemStyle: {
                color: '#FFCB5A'
            },
            label: {
                show: true,
                position: 'right',
                borderWidth: 1,
                borderColor: '#FFCB5A',
                padding: [2, 5],
            },
            zlevel: 1,
            data: avg
        },
        
        {
            type: 'custom',
            name: '下临近值',
            renderItem: renderAverageItem,
            encode: {
                x: 0,
                y: 1
            },
            itemStyle: {
                color: '#EB5940'
            },
            zlevel: 1,
            data: averageByMonth2
        }
    ]
};

1. 柱形图

let Charts = (xName, data) => {
	return {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '0%',
			top:'10px',
			right: '0%',
			bottom: '4%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: xName,
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1)",
					width: 1,
					type: "solid"
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel:  {
				interval: 0,
				show: true,
				splitNumber: 15,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '14',
				},
			},
		}],
		yAxis: [{
			type: 'value',
			axisLabel: {
				show:true,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '14',
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1)",
					width: 1,
					type: "solid"
				},
			},
			splitLine: {
				lineStyle: {
					color: "rgba(255,255,255,.1)",
				}
			}
		}],
		series: [
			{
				type: 'bar',
				data: data,
				barWidth:'35%', //柱子宽度
				itemStyle: {
					normal: {
						color:'#2f89cf',
						opacity: 1,
						barBorderRadius: 5,
					}
				}
			}
		]
	};
};

this.charData1.option = this.$option.Charts1(names, datas);

2. 折线图(无结点)

let Charts = (legendName, xName, data1, data2) => {
	return {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#dddc6b'
				}
			}
		},
		legend: {
			top:'0%',
			data: legendName,
			textStyle: {
				color: 'rgba(255,255,255,.5)',
				fontSize:'12',
			}
		},
		grid: {
			left: '10',
			top: '30',
			right: '20',
			bottom: '10',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			interval: 1,
			axisLabel:  {
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize:12,
				},
				interval: 0
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,.2)'
				}

			},
			data: xName
		}, {
			axisPointer: {show: false},
			axisLine: {  show: false},
			position: 'bottom',
			offset: 20,
		}],
		yAxis: [{
			type: 'value',
			axisTick: {show: false},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,.1)'
				}
			},
			axisLabel:  {
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize:12,
				},
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(255,255,255,.1)'
				}
			}
		}],
		series: [
			{
				name: "title1",
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {
					normal: {
						color: '#0184d5',
						width: 2
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(1, 132, 213, 0.4)'
						}, {
							offset: 0.8,
							color: 'rgba(1, 132, 213, 0.1)'
						}], false),
						shadowColor: 'rgba(0, 0, 0, 0.1)',
					}
				},
				itemStyle: {
					normal: {
						color: '#0184d5',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
				data: data1
			},
			{
				name: "title2",
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {

					normal: {
						color: '#00d887',
						width: 2
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(0, 216, 135, 0.4)'
						}, {
							offset: 0.8,
							color: 'rgba(0, 216, 135, 0.1)'
						}], false),
						shadowColor: 'rgba(0, 0, 0, 0.1)',
					}
				},
				itemStyle: {
					normal: {
						color: '#00d887',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
				data: data2
			},
		]
	};
};

this.charData3.option = this.$option.Charts3(lName, xName, data1, data2);
this.charData3.option.series[0].name = "2020";
this.charData3.option.series[1].name = "2019";

3. 折线图(有结点)

let Charts = (xName) => {
	return {
		tooltip: {//鼠标指上时的标线
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#fff'
				}
			}
		},
		legend: {
			icon: 'rect',
			itemWidth: 14,
			itemHeight: 5,
			itemGap: 13,
			data: ['title1', 'title2', 'title3'],
			right: '10px',
			top: '0px',
			textStyle: {
				fontSize: 12,
				color: '#fff'
			}
		},
		grid: {
			x: 35,
			y: 25,
			x2: 8,
			y2: 25,
			right: '20',
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLine: {
				lineStyle: {
					color: '#57617B'
				}
			},
			axisLabel: {
				textStyle: {
					color:'#fff',
				},
			},
			data: xName
		}],
		yAxis: [{
			type: 'value',
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#57617B'
				}
			},
			axisLabel: {
				margin: 10,
				textStyle: {
					fontSize: 14,
					color:'#fff',
				},
			},
			splitLine: {
				lineStyle: {
					color: '#57617B'
				}
			}
		}],
		series: [{
			name: 'title1',
			type: 'line',
			smooth: true,
			lineStyle: {
				normal: {
					width: 2
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(137, 189, 27, 0.3)'
					}, {
						offset: 0.8,
						color: 'rgba(137, 189, 27, 0)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {
					color: 'rgb(137,189,27)'
				}
			},
			data: []
		}, {
			name: 'title2',
			type: 'line',
			smooth: true,
			lineStyle: {
				normal: {
					width: 2
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0, 136, 212, 0.3)'
					}, {
						offset: 0.8,
						color: 'rgba(0, 136, 212, 0)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {
					color: 'rgb(0,136,212)'
				}
			},
			data: []
		}, {
			name: 'title3',
			type: 'line',
			smooth: true,
			lineStyle: {
				normal: {
					width: 2
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(219, 50, 51, 0.3)'
					}, {
						offset: 0.8,
						color: 'rgba(219, 50, 51, 0)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {
					color: 'rgb(219,50,51)'
				}
			},
			data: []
		}]
	};
};

let xName = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
this.$refs.char.dispose();
this.charData.option = Chart(xName);
this.charData.option.legend.data = ["小学","初中","高中"];
this.charData.option.series[0].name = "小学";
this.charData.option.series[0].data = [20,35,34,45,52,41,49,64,24,52.4,24,33];
this.charData.option.series[1].name = "初中";
this.charData.option.series[1].data = [97.3,99.2,99.3,100.0,99.6,90.6,80.0,91.5,69.8,67.5,90.4,84.9];
this.charData.option.series[2].name = "高中";
this.charData.option.series[2].data = [84.2,81.0,67.5,62.1,43.7,68.5,51.9,71.8,76.7,67.6,62.9,0];
this.$refs.char.init();

4. 圆环

let Charts = (legendName, data) => {
	return {
		title: [{
			text: 'title',
			left: 'center',
			textStyle: {
				color: '#cccccc',
				fontSize:'16'
			}
		}],
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)",
			position:function (p){   //其中p为当前鼠标的位置
				return [p[0] + 10, p[1] - 10];
			}
		},
		legend: {
			top:'70%',
			itemWidth: 20,	// 宽
			itemHeight: 10,	// 高
			data: legendName,
			textStyle: {
				color: 'rgba(255,255,255,.5)',
				fontSize:'12',
			}
		},
		series: [
			{
				name:'',
				type:'pie',
				center: ['50%', '42%'],
				radius: ['40%', '60%'],
				color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
				label: {show:false},
				labelLine: {show:false},
				data: data
			}
		]
	};
};

let datas = [ {value:1, name:'初一'}, {value:4, name:'初二'}, {value:1, name:'初三'}];
this.charData4_2.option = this.$option.Charts4(lName, datas);
this.charData4_2.option.title[0].text = "初中";

5. 雷达图

let Charts = (name) => {
	return {
		color: ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff', '#df4131'],
		tooltip: {
			show: true,
			trigger: "item"
		},
		radar: {
			indicator: name,
			radius: "80%",
			startAngle: 40, // 起始角度
			splitNumber: 4,
			shape: "circle",
			splitArea: {
				areaStyle: {
					color: 'transparent'
				}
			},
			axisLabel: {
				show: false,
				fontSize: 20,
				color: "#000",
				fontStyle: "normal",
				fontWeight: "normal"
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255, 255, 255, 0.8)"
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "rgba(255, 255, 255, 0.5)"
				}
			},
		},
		series: [{
			type: "radar",
			data: [{
				value: [],
				name: "告警类型TOP5",
				itemStyle: {
					color: "#e9df3d"
				},
				symbol: 'circle',
				symbolSize: 12,
				lineStyle: {
					normal: {
						color: '#ecc03e',
						width: 2
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
							[{
								offset: 0,
								color: 'rgba(203, 158, 24, 0.8)'
							}, {
								offset: 1,
								color: 'rgba(190, 96, 20, 0.8)'
							}],
							false)
					}
				}
			}],
		}]
	};
};

let datas = [10,20,30,40,50];
let name = [{
    name: "超速",
    value: Math.max(...datas)
}, {
    name: "闯红灯",
    value: Math.max(...datas)
}, {
    name: "闯禁行",
    value: Math.max(...datas)
}, {
    name: "违停",
    value: Math.max(...datas)
}, {
    name: "逆行",
    value: Math.max(...datas)
}];
this.charData7.option = this.$option.Charts7(name);
this.charData7.option.series[0].data[0].value = datas;

6. 柱形图-y轴反转

	oriData = [1,2,3,4,5] // 原数据
	newData = [9,8,7,6,5] // 展示数据
	max = 10

	tooltip: {
      trigger: 'axis',
      valueFormatter: val => {
        return max - val;
      }
    },
	yAxis: [
      {
        name: 'name',
        type: 'value',
        inverse: true,
        nameLocation: 'start',
        axisLabel: {
          fontSize: 10,
          color: yFontColor
        }
      },
      {
        type: 'value',
        show: false
      }
    ],
    series: [
      {
        name: '市名次',
        type: 'bar',
        yAxisIndex: 1,
        data: newData
      },
      {
        data: oriData, // 原始数据，用作处理，不做显示
        type: 'bar',
        yAxisIndex: 0,
        barGap: '-100%',
        tooltip: {
          show: false
        },
        itemStyle: {
          opacity: 0
        }
      }
    ],
No丶slovenly
关注
echarts笔记
仰望半月
11-15 3479
echarts使用笔记记录
echarts给graphic中心点添加点击事件
anny_mei的博客
06-11 1707
initChart () { this.$nextTick(() => { const chart = echarts.init(this.$refs.SmartCityPie as HTMLElement) chart.setOption(this.getOptions()) // 图表点击事件 chart.on('click', params => { if (params.component..
echarts图表点击事件
05-23
echarts的点击事件，从网上参考来的 .................................................................................................................
echarts，pie图，鼠标事件，graphic用法
HL_xzf的博客
05-20 930
/线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置。fill: 'rgba(0,0,0,0.6)' // 遮罩层颜色和透明度。fill: 'rgba(0,0,0,0.6)' // 遮罩层颜色和透明度。radius: ['80%', '100%'], // 饼图的大小。fill: '#000', // 文本颜色。text: '', // 显示的文本。
Echart 点击事件整理
qq_34618492的博客
09-15 8678
工作经常会用到图表组件，这里主要针对 echarts 插件中的点击事件说明，代码不是很难，主要是如何区分点击的位置。
vue实现 【echarts中graph关系图图例】，制作一个知识点的关系图表，其中包含 “点击节点” 和 “提示弹窗按钮点击事件” 实现【页面跳转】
weixin_50450473的博客
11-09 8036
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" KnowChart.vue <template> <div> <div id="atlasChart"></div> </div> </template> <script> import * as echarts f...
echarts常用配置、添加事件、添加自定义值
weixin_41897680的博客
07-06 9346
echarts常用配置及如何添加事件
echarts笔记.zip
09-09
在"echarts笔记.zip"这个压缩包中，我们可以推测包含的是一份关于ECharts的学习笔记或教程，可能涵盖了ECharts的基础使用方法、高级特性以及实战案例等内容。这份笔记可能会帮助我们深入理解并熟练掌握ECharts的各个...
echarts笔记资源代码
最新发布
08-10
柱状图、折线图、饼图、散点图、直角坐标系配置等，有清晰的注释和效果图
echarts笔记。。。
04-09
echarts笔记。。。
Echarts笔记总结
11-12
关于Echarts的总结，重要是以柱状图为例子，附带截图和源码，基本一看就懂了！！
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心）
苦瓜_小学生的博客
04-25 3100
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心） 给图表添加自定义文字 给图表添加自定义图片
Echarts基础学习 7-graphic和可拖拽点
qkdgz的博客
06-08 865
graphic，可拖拽点，事件
echarts图例点击事件
hanlu66的博客
06-27 9588
//图例切换事件var legend； var triggerAction = function(action, selected) { legend = []; for (name in selected) { if (selected.hasOwnProperty(name)) { legend.p...
echart图表点击事件
木玄客的博客
02-17 2192
echart图表点击事件。
echarts仪表盘给刻度加点击事件
W1448153872的博客
08-08 454
一定要给包裹echarts的容器加事件，这样才能保证只有在这个容器内点击，才能触发事件。
echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现
热门推荐
笑到世界都狼狈的博客
09-04 1万+
1.首先看一下效果图： 2.代码目录结构 3.参考地址：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都比较清楚，所以这边我直接上全部代码了，就不拆分解释说明了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".
echarts中graphic_graphic组件
weixin_42299131的博客
12-23 3704
设置ECharts直线元素graphic.elements[i]-line直线。graphic.elements[i]-line.type[ 默认值 line ]用 setOption 首次设定图形元素时必须指定。 可取值：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, grou...
ECharts图表笔记：全面的图表配置及效果展示
资源摘要信息:"echarts笔记资源代码" 1. 标题知识点：ECharts是一种使用JavaScript实现的开源可视化库，它提供了柱状图、折线图、饼图、散点图等多种图表类型，适用于各种复杂数据的可视化展示。标题中的“笔记资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值