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>

效果图

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

echarts的标记线和标记点
markPoint: 标记点---------------------------markLine:标记线看了好几天还是不太理解markPoint和markLine的作用, 昨晚看视频终于有点理解了 ...
echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）
1. 使用echarts画标记线(工字型) 1.1 实现效果 1.2 使用属性详细参数可查看echarts官网,markline属性 https://echarts.apache.org/zh/op ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
【学习OpenCV4】OpenCV绘制标记/线/矩形/文字/圆等
本文分享内容来自图书<学习OpenCV 4:基于Python的算法实战>,该书内容如下: 第1章 OpenCV快速入门: 第2章图像读写模块imgcodecs: 第3章核心库模块cor ...
java 计算移动平均线_基于Java语言开发的个性化股票分析技术：移动平均线(MA)...
基于Java语言开发的个性化股票分析技术:移动平均线(MA) 基于 Java 语言开发的个性化股票分析技术:移动平均线(MA)移动平均线(MA)是以道·琼斯的"平均成本概念"为理论 ...
中国乙二醇型汽车防冻液市场运营能力分析与投资战略规划研究报告2022-2028年版
*章中国乙二醇型汽车防冻液行业发展状况综述15 *节中国乙二醇型汽车防冻液行业简介15 一.乙二醇型汽车防冻液行业的界定及分类15 二.乙二醇型汽车防冻液行业的特征15 三.乙二醇型汽车防冻液的主 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...

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

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

代码

效果图

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

最新文章

热门文章