0
点赞
收藏
分享

微信扫一扫

echarts 图表 设置柱状图,并将数据区域缩放20-40区间

非凡兔 2022-03-22 阅读 73

一、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.可拖拽

 calculable: true,

6. 插入图例

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

7.设置直角坐标系内网格,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
            },

8.设置组内数据

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>

 

 

 

 

 

 

 

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

举报

相关推荐

Echarts图表之柱状图

echarts 柱状图颜色设置

Echarts 柱状图设置颜色

echarts柱状图宽度设置

Echarts柱状图

echarts—柱状图

echarts 柱状图笔记

echarts 横向柱状图

0 条评论