JavaScript销售经理能力分析echarts（标记点、标记线）

最新推荐文章于 2024-04-02 22:17:07 发布

EBYB

最新推荐文章于 2024-04-02 22:17:07 发布

阅读量639

点赞数 1

分类专栏： JavaScript 文章标签： echarts javascript vscode

本文链接：https://blog.csdn.net/qq_53326467/article/details/124091619

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

echarts.js下载链接提取码：7gaghttps://pan.baidu.com/s/1XwM6UJV3FK0nkxDxwEoR3w?pwd=7gag

根据以下数据实现图标，设置标记点标记线

	王斌	刘倩	袁波
销售	87.5	90	92.5
沟通	87.5	88.75	91.25
服务	90	85	88.75
协作	91.25	87.5	92.5
培训	85	88.75	91.25
组织	87.5	91.25	88.75

代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="echarts.js"></script>
</head>

<body>
	<div id="main" style="width: 900px; height: 600px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main"));
        mytextStyle = {
            color: "red",
            fontWeight: "bolder",
            fontSize: 20,
        };
		var option = {
            title:{
                show:true,
                text:'销售经理能力对比分析',
                textStyle: mytextStyle,
                left:'center',
            },
            legend:{
                data: ['王斌', '刘倩','袁波'],
                itemGap: 5,
                left:'5%',
                itemGap:20
            },
			tooltip: {
				trigger: 'axis',
				axisPointer:
				{
					type: 'shadow',
					lineStyle: {
						color: '#48b', width: 2, type: 'solid'
					},
					crossStyle: {
						color: '#1e90ff', width: 1, type: 'dashed'
					},
					shadowStyle: {
						color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
					}
				},
				showDelay: 0, hideDelay: 0, transitionDuration: 0,
				backgroundColor: 'rgba(0,222,0,0.5)',
				borderColor: '#f50', borderRadius: 8, borderWidth: 2,
				padding: 10,
				position: function (p) {
					return [p[0] + 10, p[1] - 10];
				},
				textStyle: {
					color: 'blue', decoration: 'none', fontFamily: 'sans-serif',
					fontSize: 15, fontStyle: 'normal', fontWeight: 'bold'
				},
				formatter: function (params, ticket, callback) {
					console.log(params)
					var res = '详情提示框 : <br/>' + params[0].name;
					for (var i = 0, l = params.length; i < l; i++) {
						res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
					}
					setTimeout(function () {
						callback(ticket, res);
					}, 500)
					return 'loading';
				}
			},
			toolbox: {
				show: true,
                left:'70%',
				feature: {
					mark: { show: true }, dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
					restore: { show: true }, saveAsImage: { show: true }
				}
			},
			calculable: true,
			xAxis: {
				data: ['销售','沟通','服务','协作','培训','组织']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '王斌', type: 'bar',
					data: [87.5,87.5,90,91.25,85,87.5],
                    markPoint:{
                        data:[
                        {
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {
								normal: { color: 'blue' }
							},
						},
                        ]
                    },
                    markLine: {
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				}
				},
				{
					name: '刘倩', type: 'bar',
					data: [90,88.75,85,87.5,88.75,91.25],
                    markPoint:{
                        data:[
                        {
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {
								normal: { color: 'blue' }
							},
						},
                        ]
                    },
                    markLine: {
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				}
				},
				{
					name: '袁波', type: 'bar',
					data: [92.5,91.25,88.75,92.5,91.25,88.75],
                    markPoint:{
                        data:[
                        {
							type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
							itemStyle: {
								normal: { color: 'red' }
							},
						},
                        ]
                    },
                    markLine: {
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				}
				},
			]
		};
		myChart.setOption(option); 
	</script>
</body>

</html>

效果图

EBYB

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript销售经理能力分析echarts（标记点、标记线）

echarts.js下载链接提取码：7gaghttps://pan.baidu.com/s/1XwM6UJV3FK0nkxDxwEoR3w?pwd=7gag根据以下数据实现图标，设置标记点标记线王斌刘倩袁波销售 87.5 90 92.5 沟通 87.5 88.75 91.25 服务 90 85 88.75 协作 91.25 87.5 92.5 培训 85 88.75
复制链接

扫一扫