数据可视化echarts实现在柱状图中插入标记点和标记线

在代码里下毒

已于 2024-06-05 08:54:09 修改

阅读量1w

点赞数 5

文章标签： javascript visual studio code

于 2022-03-30 10:54:58 首次发布

本文链接：https://blog.csdn.net/qq_46011557/article/details/123840276

版权

一：echarts是什么？

一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

二：使用步骤：

1.引入echarts.js插件

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

2.设置标题格式：颜色，大小，位置

<div id="main" style="width: 900px; height: 600px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main"));
        mytextStyle = {
            color: "red",
            fontWeight: "",
            fontSize: 20,
        };
		var option = {
            title:{
                show:true,
                text:'销售经理能力对比分析',
                textStyle: mytextStyle,
                left:'center',
            },

3 .设置提示框组件

tooltip:{
                trigger: 'axis',
                axisPointer:{
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },

4.设置工具栏

toolbox:{
                show: true,
                feature:{
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },

5. 插入图例

 legend:{
                data: ['王斌', '刘倩','袁波'],
                itemGap: 5,
                left:'left',
                top:'25',
                itemGap: 25,
            },

6.设置直角坐标系内网格，x，y轴

 grid:{
                top: '12%',
                left: '1%',
                right: '10%',
                containLabel: true
            },
            xAxis:[
                {
                    type: 'category',
                    data:['销售','沟通','服务','协作','培训','组织']
                }
            ],
            yAxis:[
                {
                    type: 'value',
                }
            ],
            dataZoom:{
                show: true, 
                realtime: true,
                start: 20, 
                end: 40
            },

7.设置组内数据（添加标记点和标记线）

 series:[
        {
            name:'王斌',
            type:'bar',
            data:[87.5,87.5,90,91.25,85,87.5],
            itemStyle:{
                color:'#dd6b66'
            },
            markPoint:{  //设置标记点
					data: [
						{
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'blue' }
							},
						},
					],
				},
        },
     
				
        {
            name:'刘倩',
            type:'bar',
            data:[90,88.75,85,87.5,88.75,91.25],
            itemStyle:{
                color:'#759aa0'
         },
         markPoint:{  //设置标记点
					data: [

						{
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'blue' }
							},
						},
					],
				},
				markLine:{  //设置标记线
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:  //设置标记点的样式
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
                        lineStyle:{
                            type:"soild"
                        }
				},
            },
        {
            name:'袁波',
            type:'bar',
            data:[92.5,91.25,88.75,92.5,91.25,88.75],
            itemStyle:{
                color:'#e69d87'
         },
         markPoint:{  //设置标记点
					data: [
						{
							type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'red' }
							},
						},
					],
				},
				markLine:{  //设置标记线
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:  //设置标记点的样式
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				},
        },
        
      ],