createCharts页面单独摘出

最新推荐文章于 2023-08-24 17:11:36 发布

leo_qiu_s

最新推荐文章于 2023-08-24 17:11:36 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/qiudechao1/article/details/99292158

版权

createCharts页面单独摘出，html代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;"></div>
	
	<script type = "text/javascript" >

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	var xAxis = ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"];
	var legend = ['总数', '响应时间', '接单时间', '评价得分'];
	var total = [2, 5, 4, 3, 6, 5, 4, 1, 8, 3, 4, 10];
	var res = [2.0, 2.2, 3.3, 3.5, 5.3, 7, 8, 9, 9.0, 6.5, 7.0, 16];
	var order = [3.0, 3.3, 3.3, 4.5, 6.3, 10, 9.3, 7.4, 8.0, 6.5, 3.0, 6.3];
	var score = [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3]

	var option = {
		//默认色板
		color: ['#dd3ee5', '#12e78c', '#fe8104'],
		//标题，可以自定义标题的位置和样式
		title: {
			//text: '服务指标'
		},
		//鼠标hover提示框
		tooltip: {
			trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
			axisPointer: { //坐标轴指示器，坐标轴触发有效，
				type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
				crossStyle: {
					color: '#fff'
				}
			}
		},

		//图例
		legend: {
			data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
			itemHeight: 9, //改变圆圈大小
			icon: "circle",
			textStyle: {
				color: '#B0CEFC' // 图例文字颜色
			}
		},
		//直角坐标系内绘图网格，设置表格显示区域
		grid: {
			x: 65, //图表左上角到左边界的距离
			y: 38, //图表左上角到上边界的距离
			x2: 65, //图表右下角到右边界的距离
			y2: 26, // 图表右下角到下边界的距离
		},
		xAxis: [{
				type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				data: xAxis,
				axisPointer: { //坐标轴指示器
					type: 'shadow' //在tooltip的cross基础上，增加阴影类型的X轴指示器
				},
				//坐标轴文字标签
				axisLabel: {
					show: true, //如果为false，则X轴不显示文字标签
					textStyle: {
						color: '#B0CEFC',
					}
				},
			},
		],
		yAxis: [
			//第一个Y轴
			{
				position: 'left',
				type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				name: '(分值)      ',
				min: 0, //Y轴最小值
				max: 5, //Y轴最大值
				interval: 1, //Y轴间隔
				//坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
				nameTextStyle: {
					color: '#B0CEFC',
					padding: 10 //内边距
				},
				//坐标轴文字标签
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: true
				},
				//分割线/网格样式
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
						width: 1,
						type: 'solid' //实心，solid | dotted | dashed，
					}
				}
			},
			//第二个Y轴
			{
				position: 'right',
				type: 'value',
				name: '      (分钟)',
				nameTextStyle: {
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				axisLine: {
					show: false
				},
				//分割线/网格
				splitLine: {
					show: true, //是否显示网格
					lineStyle: {
						color: ['blue'],
						width: 1,
						type: 'dotted'
					}
				}
			},
			//第三个Y轴在左边，距离第一个Y轴50像素
			{
				show: true,
				position: 'left',
				offset: 35, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				type: 'value',
				name: '(总数)      ',
				//不设置min、max、interval，坐标浮动处理
				nameTextStyle: { //坐标轴文字样式
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: false
				},
				//分割线
				splitLine: {
					show: false,
				}
			}
		],
		series: [{
				name: '总数',
				type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 2, //选择index为2的Y轴作为参考系
				data: total,
				barWidth: 12, //柱图宽度
				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#d223e7'
						}, {
							offset: 1,
							color: '#f376e0'
						}
					]),
				//图形样式
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
				//标签：顶部显示柱状图数值
				label: {
					normal: {
						show: true,
						position: 'top',
						formatter: '{c}',
						textStyle: {
							fontSize: 16,
							color: '#B0CEFC'
						}
					}
				}
			}, {
				name: '响应时间',
				type: 'line', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: res,
				//线条样式，如折线图
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
			}, {
				name: '接单时间',
				type: 'line',
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: order,
				lineStyle: {
					normal: {
						color: "#12e78c"
					}
				}
			}, {
				name: '评价得分',
				type: 'line',
				yAxisIndex: 0, //选择index为0的Y轴作为参考系
				data: score,
				lineStyle: {
					normal: {
						color: "#fe8104"
					}
				}
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	</script >
	
</body>
</html>

leo_qiu_s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
createCharts页面单独摘出

createCharts页面单独摘出，html代码如下<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>EChartsTest</title>  <script s...
复制链接

扫一扫