Echarts---多表联动

yu:

已于 2024-04-15 09:04:59 修改

阅读量161

点赞数 2

文章标签： echarts 前端 javascript

于 2024-04-15 08:39:04 首次发布

本文链接：https://blog.csdn.net/W_051/article/details/137764466

版权

做图表之前都要做一个盒子框架

添加水印

王者荣耀实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main1" style="width: 700px; height: 400px"></div>
    <div id="main2" style="width: 700px; height: 400px"></div>
    <script type="text/javascript">
    //指定图表的配置项和数据
    //基于准备好的dom，初始化ECharts图表
    var myChart1 = echarts.init(document.getElementById("main1"));
    var waterMarkText = '吊炸天';
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			canvas.width = canvas.height = 100;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.globalAlpha = 0.08;
			ctx.font = '20px Microsoft Yahei';
			ctx.translate(50,50);
			ctx.rotate(-Math.PI / 4);
			ctx.fillText(waterMarkText, 0, 0);
			var option1 = {
				backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
        color: ['LimeGreen',' DarkGreen', 'red', 'green', 'Purple'],
        title: { text: '王者荣耀蔡文姬强度', },
        tooltip: { toolip: { show: true }, },
        radar: {
            // shape: 'circle',
            indicator: [
            { name: '输出', max: 100 },
            { name: '生存', max: 100 },
            { name: '团战', max: 100 },
            { name: '发育', max: 100 },
            { name: 'KDA', max: 100 },
            ]
        },
        series: [{     //配置第1个图表的数据系列
            name: '2019年招生',
            type: 'radar',   //设置柱状图中每个柱子的宽度
            data: [{
                value: [55.0, 94.5, 95.00, 67.25, 70.00],
                name: '蔡文姬',
                areaStyle:{
                    normal:{
                        color:'green'
                    }
                }
        }],
        }]
    };
    //基于准备好的dom，初始化ECharts图表
    var myChart2 = echarts.init(document.getElementById("main2"));
    var waterMarkText = '吊炸天';
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			canvas.width = canvas.height = 100;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.globalAlpha = 0.08;
			ctx.font = '20px Microsoft Yahei';
			ctx.translate(50,50);
			ctx.rotate(-Math.PI / 4);
			ctx.fillText(waterMarkText, 0, 0);
			var option2 = {
				backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
        color: ['red',' LimeGreen', 'Darkgreen', 'red', 'Purple'],
        title: { text: '王者荣耀百里守约强度', },
        tooltip: { toolip: { show: true }, },
        radar: {
            // shape: 'circle',
            indicator: [
            { name: '输出', max: 100 },
            { name: '生存', max: 100 },
            { name: '团战', max: 100 },
            { name: '发育', max: 100 },
            { name: 'KDA', max: 100 },
            ]
        },
        series: [{     //配置第1个图表的数据系列
            name: '2019年招生',
            type: 'radar',   //设置柱状图中每个柱子的宽度
            data: [{
                value: [97, 77, 80.00, 91.25, 78.00],
                name: '百里守约',
                areaStyle:{
                    normal:{
                        color:'red'
                    }
                }
        }],
        }]
    };
    myChart1.setOption(option1);   //为mychart1对象加载数据
    myChart2.setOption(option2);   //为mychart2对象加载数据
    //多图表联动配置方法1：分别设置每个ECharts对象的group值
    myChart1.group = 'group1';
    myChart2.group = 'group1';
    echarts.connect('group1');
</script>
</body>
</html>

效果图：

我鼠标放在一个表上，另外一个表的数据也会显示，呈现多表联动

带水印的柱状图与饼图混搭图表的关键代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.js"></script>
		<title>带水印的柱状图与饼图混搭图表的关键代码</title>
	</head>
	<body>
		<div id="main" style="width: 800px; height: 600px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById("main"));
			var builderJson ={
				"all":10887,
				"charts":{
					"地理坐标图": 3237, "路径图": 2164, "柱状图": 7561, "折线图": 7778,
									"饼图": 7355, "散点图": 2405, "K线图": 1842, "雷达图": 2090,
									"热力图": 1762, "矩形树图": 1593, "关系图": 2060, "盒须图": 1537,
									"平行坐标系": 1908, "仪表盘图": 2107, "漏斗图": 1692, "桑基图": 1568
				},
				"components":{
					"地理坐标系组件":2788,"标题组件":9575,"图例组件":9400,
					"提示组件":9466,"直角坐标系组件":9266,"图表标注组件":3419,
					"图表标线组件":2894,"时间线组件":2739,"区域缩放组件":2744,
					"视觉映射组件":2466,"工具框组件":3034,"极坐标系组件":1945
				},
				"ie":9743
			};
			var downloadJson = {
				"完整版":17365,"精简版":4079,
				"常用版":6929,"源代码版":14890
			};
			var themeJson = {
				"黑色主题":1594,"信息主题":925,"明亮主题":1608,
				"罗马主题":721,"马卡龙主题":2179,"复古主题":1982
			};
			var waterMarkText = '吊炸天';
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			canvas.width = canvas.height = 100;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.globalAlpha = 0.08;
			ctx.font = '20px Microsoft Yahei';
			ctx.translate(50,50);
			ctx.rotate(-Math.PI / 4);
			ctx.fillText(waterMarkText, 0, 0);
			var option = {
				backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
				tooltip:{},
				title:[{
					text:'在线构建次数',
					subtext:'总计'+ Object.keys(builderJson.charts).reduce
					(function (all, key) {
						return all + builderJson.charts[key];
					}, 0),
					x: '25%',
					textAlign:'center'
				},{
					text:'各图表组件的使用次数',
					subtext:'总计'+ Object.keys(builderJson.components).reduce
					(function (all, key) {
							return all + builderJson.components[key];
						}, 0),
						x: '25%',y:'53%',
						textAlign:'center'
					},{
						text:'各版本下载',
						subtext:'总计'+ Object.keys(downloadJson).reduce
						(function (all, key) {
								return all + downloadJson[key];
							}, 0),
							x: '75%',
							textAlign:'center'
						},{
						text:'主题下载',
						subtext:'总计'+ Object.keys(themeJson).reduce(function (all, key) {
								return all + themeJson[key];
							}, 0),
							x: '75%',y:'50%',
							textAlign:'center'
						}],
						grid: [{
							top:50,width:'50%',bottom:'50%',
							left:10,containLabel:true
						},{
							top:'55%',width:'50%',
							bottom:0,top:'60%',left:10,containLabel:true
						}],
						xAxis:[{
							type:'value',
							max:builderJson.all,
							splitLine:{show:false}
						},{
							type:'value',
							max:builderJson.all,
							gridIndex:1,
							splitLine:{show:false}
						}],
						yAxis:[{
							type:'category',
							data:Object.keys(builderJson.charts),
							axisLabel:{interval:0,rotate:20},
							splitLine:{show:false}
						},{
							gridIndex:1,
							type:'category',
							data:Object.keys(builderJson.components),
							axisLabel:{interval:0,rotate:20},
							splitLine:{show:false}
						}],
						series:[{
							type:'bar',stack:'chart',z:3,
							label:{normal:{position:'right',show:true}},
							data: Object.keys(builderJson.charts).map(function (key) {
								return builderJson.charts[key];
							})
						},{
							type:'bar',stack:'chart',silent:true,
							itemStyle:{normal:{color:'#eee'}},
							data: Object.keys(builderJson.charts).map(function (key) {
								return builderJson.all - builderJson.charts[key];
							})
						},{
							type:'bar',stack:'components',xAxisIndex:1,yAxisIndex:1,z:3,
							label:{normal:{position:'right',show:true}},
							data: Object.keys(builderJson.components).map(function (key) {
								return builderJson.components[key];
							})
						},{
							type:'bar',stack:'components',silent:true, 
							xAxisIndex:1,yAxisIndex:1,
							itemStyle:{normal:{color:'#eee'}},
							data: Object.keys(builderJson.components).map(function (key) {
								return builderJson.all - builderJson.components[key];
							})
						},{
							type:'pie',radius:[0,'30%'],center:['75%','25%'],
							data: Object.keys(downloadJson).map(function (key) {
								return {
									name:key.replace('.js',''),
									value:downloadJson[key]
								}
							})
						},{
							type:'pie',radius:[0,'30%'],center:['75%','75%'],
							data: Object.keys(themeJson).map(function (key) {
								return {
									name:key.replace('.js',''),
									value:themeJson[key]
						}
					})
				}]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

效果图：