echarts 相关记录

最新推荐文章于 2023-02-28 09:36:24 发布

871714854

最新推荐文章于 2023-02-28 09:36:24 发布

阅读量493

点赞数

文章标签： javascript html5 vue.js html css

本文链接：https://blog.csdn.net/m0_38094015/article/details/110792381

版权

文章目录

前言
一、echarts 容器边界设置：
二、异步数据加载和更新
- 更新
三、使用 Canvas 或者 SVG 渲染：
四、tab切换重新渲染图表：
五、图表中文字太长换行设置：
六、页面中图表循环：
七、清除数据缓存：
八、echarts方法封装：

前言

echarts日常总结

一、echarts 容器边界设置：

1.折线图，柱状图，散点图
grid:{
    left:20,
    right:'30%',
    bottom:'10%',
    height:140,
}
2.中心半径定位
例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）
依据 center（中心）、radius（半径）来决定位置
series: [{
			name: '访问来源',
			type: 'pie',
            radius: [0, '75%'] ,
			center: ['50%', '50%'],
			data: datas
		}]
// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

二、异步数据加载和更新

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

或者

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

setInterval(function () {
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 500);

三、使用 Canvas 或者 SVG 渲染：

选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。

在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。
在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如水球图等，SVG 渲染器可能效果更好。
数据量很大、较多交互时，可以选用 Canvas 渲染器。

var m = echarts.init(document.getElementById(id),{renderer: 'canvas'});
var m = echarts.init(document.getElementById(id),{renderer: 'svg'});

四、tab切换重新渲染图表：

有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

/*注册*/
var m = echarts.init(document.getElementById(id),{renderer: 'canvas'});
/*dom的宽度*/
var _width = $("#m1").width();
/*点击时候改变图表尺寸，确保已经获取到宽度，在执行resize*/
m.resize(_width);
m.setOption(option);

五、图表中文字太长换行设置：

formatter：标签内容格式器

> formatter: function(params) {
> 				var newParamsName = '';
> 				var paramsNameNumber = params.length;
> 				var provideNumber = 2; //一行显示几个字
> 				var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
> 				if (paramsNameNumber > provideNumber) {
> 					for (var p = 0; p < rowNumber; p++) {
> 						var tempStr = "";
> 						var start = p * provideNumber;
> 						var 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 			
> },

六、页面中图表循环：


list: [ // 假数据
			{
			id: 1,
			price: {
				name: '项目一',
				resData: [{name: '直接访问',value: 12},
						  {name: '邮件营销',value: 18},
						  {name: '联盟广告',value: 8},
						  {name: '视频广告',value: 10},
						]}
			}, 
			{
			id: 2,
			price: {
				name: '项目二',
				resData:  [{name: '直接访问',value: 12},
						   {name: '邮件营销',value: 18},
						   {name: '联盟广告',value: 8},
						   {name: '视频广告',value: 10},
							]}
						}
					],

drawRose() {		
var roseCharts = document.getElementsByClassName('roseChart'); // 对应地使用ByClassName
// 指定图表的配置项和数据
for (var i = 0; i < roseCharts.length; i++) { // 通过for循环，在相同class的dom内绘制元素
var myChart = echarts.init(roseCharts[i]);
option = {
				tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
						},
				legend: {
						orient: 'vertical',
						left: '10%',
						top: 'middle',
						data: this.list[i].price.resData ,// 渲染每个图表对应的数据,
						},
				series: [{
						name: '访问来源',
						type: 'pie',
						radius: '70%',
					    right: 0,
						center: ['70%', '50%'],
						//图形上的文本标签，
						label: {
								normal: {
								show: false,
							    position: 'inside', 
									formatter: params => {
										return (params.percent.toFixed(2) + "%");
									},
								},
								emphasis: {
									show: true,
									textStyle: {
									fontSize: '10',
									fontWeight: 'bold'
											   }
										}
								},
				               data: this.list[i].price.resData ,// 渲染每个图表对应的数据
								}]
					},
					myChart.setOption(option);

七、清除数据缓存：

var age = echarts.init(document.getElementById(id));
age.clear(this.option);

八、echarts方法封装：

formatter：标签内容格式器

var line1 = {
	name: '年龄',
	color: 'rgba(0,202,149,1)',
	color1: 'rgba(0,202,149,0)',
	color2: 'rgba(0,202,149,0.3)',
	color3: 'rgba(0,202,149,0.9)',
	data: [281, 198, 214, 279, 289, 322, 456, 500],
	xdata: ['<=26', '26-30', '31-35', '36-40', '41-45', '46-50', '51-55', '56-60'],
	formatter: '{value}'
};

var line2 = {
	name: '学历',
	color: 'rgba(119,84,255,1)',
	color1: 'rgba(119,84,255,0)',
	color2: 'rgba(119,84,255,0.3)',
	color3: 'rgba(119,84,255,0.9)',
	data: [81, 98, 214, 279, 389, 322, 256],
	xdata: ['高中', '中专', '大专', '党校本科', '本科', '党校研究生', '研究生'],
	formatter: function(params) {
		var newParamsName = '';
		var paramsNameNumber = params.length;
		var provideNumber = 2; //一行显示几个字
		var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
		if (paramsNameNumber > provideNumber) {
			for (var p = 0; p < rowNumber; p++) {
				var tempStr = "";
				var start = p * provideNumber;
				var 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
	}
};
var line3 = {
	name: '入职年限',
	color: 'rgba(0,226,246,1)',
	color1: 'rgba(0,226,246,0)',
	color2: 'rgba(0,226,246,0.3)',
	color3: 'rgba(0,226,246,0.9)',
	data: [160, 180, 130, 80],
	xdata: ['1年以内', '1-3年', '4-10年', '10年以上'],
	formatter: '{value}'
};

function line(id, line) {
	// 图标响应式大小
	$(document).ready(function() {
		$(window).resize(function() {
			var _width = $(id).width();
			age.resize(_width);
		});
	});
	// 注册
	var age = echarts.init(document.getElementById(id));
	age.clear(this.option);
	option = {
		title: {
			text: line.name,
			textStyle: {
				align: 'left',
				color: 'yellow',
				fontSize: 16,
			},
			top: '5%',
			left: 'center'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(0, 255, 233,0)'
						}, {
							offset: 0.5,
							color: 'rgba(255, 255, 255,1)',
						}, {
							offset: 1,
							color: 'rgba(0, 255, 233,0)'
						}],
						global: false
					}
				},
			}
		},
		grid: {
			top: '25%',
			left: '5%',
			right: '8%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: [{
			nameTextStyle: {
				nameGap: 0,
				fontSize: 12,
				color: '#fff'
			},
			axisLine: {
				// symbol: ['none', 'arrow'],
				// symbolSize: [8, 8],
				lineStyle: {
					width: 1,
					color: '#dce5ed'
				}
			},
			type: 'category',
			splitArea: {
				// show: true,
				color: '#f00',
				lineStyle: {
					color: '#f00'
				},
			},
			axisLabel: {
				color: '#fff',
				formatter: line.formatter
			},
			splitLine: {
				show: false
			},
			boundaryGap: false,
			data: line.xdata

		}],
		yAxis: [{
			name: '单位：人',
			nameTextStyle: {
				nameGap: 0,
				fontSize: 10,
				color: '#e4e4e4 '
			},
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			},
			axisLine: {
				symbol: ['none', 'arrow'],
				symbolSize: [8, 8],
				lineStyle: {
					width: 1,
					color: '#e4e4e4 '
				}
			},
			axisLabel: {
				show: true,
				margin: 20,
				textStyle: {
					color: '#e4e4e4 ',

				},
			},
		}],
		series: [{
			name: 'O3',
			type: 'line',
			smooth: true, //是否平滑
			showAllSymbol: true,
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#e4e4e4',
				}
			},
			itemStyle: {
				color: line.color,
				borderColor: line.color,
				borderWidth: 4,
				shadowColor: 'rgba(0, 0, 0, .3)',
				shadowBlur: 0,
				shadowOffsetY: 2,
				shadowOffsetX: 2,
			},
			tooltip: {
				show: false
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: line.color1
						},
						{
							offset: 1,
							color: line.color2
						}
					], false),
					shadowColor: line.color3,
					shadowBlur: 20
				}
			},
			data: line.data
		}]
	}
	age.setOption(option);
	var _width = $(id).width();
	age.resize(_width)
}

/* id，数据*/
$(document).ready(function() {
	line('age', line1);
	line('education', line2);
	line('Entry', line3)
});

# 总结平时做echarts图表问题总结记录

871714854

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts 相关记录

文章目录前言一、echarts 容器边界设置：二、异步数据加载和更新更新三、使用 Canvas 或者 SVG 渲染：四、tab切换重新渲染图表：五、图表中文字太长换行设置：六、页面中图表循环：七、清除数据缓存：八、echarts方法封装：前言echarts日常总结一、echarts 容器边界设置：1.折线图，柱状图，散点图grid:{ left:20, right:'30%', bottom:'10%', height:140,}2.中心半径定位例如，pi
复制链接

扫一扫