JavaScript实现轴缩放echarts

最新推荐文章于 2024-03-18 21:10:14 发布

EBYB

最新推荐文章于 2024-03-18 21:10:14 发布

阅读量211

点赞数

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

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

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

echarts.js下载链接

提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw

图表数据

	王斌	刘倩	袁波
销售	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: 800px; 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',
            },
			tooltip:{
                trigger: 'axis',
                axisPointer:{
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            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 }
                }
            },
            calculable: true,
            legend:{
                data: ['王斌', '刘倩','袁波'],
                itemGap: 5,
                left:'left',
                top:'25',
                itemGap:50
            },
            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
            },
            series:[
                {
                    name: '王斌',  
                    type: 'bar',
                    color:'#dd6b66',
                    data:[87.5,87.5,90,91.25,85,87.5]
                },
                {
                    name: '刘倩',  
                    type: 'bar',
                    color:'#759aa0',
                    data:[90,88.75,85,87.5,88.75,91.25]
                },
                {
                    name: '袁波',  
                    type: 'bar',
                    color:'#e69d87',
                    data:[92.5,91.25,88.75,92.5,91.25,88.75]
                },
            ]
	    };
		myChart.setOption(option); 
	</script>
</body>

</html>

效果图

EBYB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现轴缩放echarts

echarts.js下载链接提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw图表数据王斌刘倩袁波销售 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
复制链接

扫一扫