Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色

加载echarts.js,以及初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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'));

设置标题

字体颜色，大小，格式，粗细

 title: {
        show: true, 
        text: "销售经理能力对比分析",
        left: 'center',
        textStyle:{
        color:'#FF0000',
        fontStyle:'normal',
        fontWeight:'normal',
        fontFamily:'sans-serif',
　　　　 fontSize:20
        }
    },

设置小组件

	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 }
				}
			},

设置X,Y轴

xAxis: { 
				data: ['销售', '沟通', '服务', '协作', '培训', '组织']
			},
			yAxis: {
				type: 'value'
			},

设置缩放区间

 dataZoom:{
                show:true,
                realtime:true,
                start:20,
                end:40
            },

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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'));
    var option = {
        title: {
        show: true, 
        text: "销售经理能力对比分析",
        left: 'center',
        textStyle:{
        color:'#FF0000',
        fontStyle:'normal',
        fontWeight:'normal',
        fontFamily:'sans-serif',
　　　　 fontSize:20
        }
    },
			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,
			xAxis: { 
				data: ['销售', '沟通', '服务', '协作', '培训', '组织']
			},
			yAxis: {
				type: 'value'
			},
            tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                 type: 'shadow'
          }
        },
        legend: {
            left:'left',
            top: '5%',
            itemGap:100
        },
        dataZoom:{
                show:true,
                realtime:true,
                start:20,
                end:40
            },
			series: [  
				{   
					name: '王斌', type: 'bar',
					data: [87.5, 87.5, 90, 91.25, 85, 87.5],
                    color:'#dd6b66'
				},
				{   
					name: '刘倩', type: 'bar',
					data: [90, 88.75, 85, 87.5, 88.75, 91.25],
                    color:'#759aa0'
				},
				{  
					name: '袁波', type: 'bar',
					data: [92.5, 91.25,88.75,92.5,91.25,88.75],
                    color:'#e69d87'
				},
				
			]
    };
        myChart.setOption(option);
    </script>
</body>
</html>

结果图

 代码截图

 

版权声明：本文为qq_45894761原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。