Echarts柱状图的学习总结(一)

今天在学习Echarts练习时,总是在路径的配置上出现错误,作为入门,总结一下,在此分享给大家,希望有用。

ECharts主页:  http://echarts.baidu.com/index.html

ECharts-2.2.0下载地址:  http://echarts.baidu.com/build/echarts-2.2.0.zip

ECharts官方实例:  http://echarts.baidu.com/doc/example.html

ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html

1、项目结构

js文件夹: 下载了ECharts之后,解压缩,如解压后的根目录是echarts-2.2.0,则到echarts-2.2.0\doc\example\www路径下,把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

echarts.jsp:在WebRoot根目录下新建echarts.jsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts-基本线性图及其配置要求</title>
</head>
<body>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="width:500px;height:500px;border:1px solid #ccc;padding:10px;"></div>

    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="js/echarts.js"></script>

    <script type="text/javascript">
    // Step:3 conifg ECharts‘s path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
    require.config({
        paths: {
            echarts: ‘./js‘		//echarts.js所在的路径
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
    require(
        [
            ‘echarts‘,
            ‘echarts/chart/bar‘,
            ‘echarts/chart/line‘,
            ‘echarts/chart/map‘
        ],
        function (ec) {//渲染ECharts图表  ,可单独写出来作为回调函数
            //--- 折柱 ---
            //图表渲染的容器对象
	        var chartContainer = document.getElementById("main");  //""、‘‘这里均可以
            //加载图表
            var myChart = ec.init(chartContainer);
            myChart.setOption({
                tooltip : {
                    trigger: ‘axis‘
                },
                legend: {
                    data:[‘蒸发量‘,‘降水量‘]
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: [‘line‘, ‘bar‘]},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                    	name : ‘月份‘,
                        type : ‘category‘,
                        data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘]
                    }
                ],
                yAxis : [
                    {
                    	name : ‘数值‘,
                        type : ‘value‘,
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:‘蒸发量‘,
                        type:‘bar‘,
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:‘降水量‘,
                        type:‘bar‘,
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });

            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById(‘mainMap‘));
            var option = {
                tooltip : {
                    trigger: ‘item‘,
                    formatter: ‘{b}‘
                },
                series : [
                    {
                        name: ‘中国‘,
                        type: ‘map‘,
                        mapType: ‘china‘,
                        selectedMode : ‘multiple‘,
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:‘广东‘,selected:true}
                        ]
                    }
                ]
            };
            myChart2.setOption(option); // 为echarts对象加载数据 

        }
    );
    </script>
</body>
</html>

完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到效果.

时间: 2024-11-12 00:11:01

Echarts柱状图的学习总结(一)的相关文章

图表控件== 百度 echarts的入门学习

花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http://echarts.baidu.com/examples.html :大数据 统计 先打包下载代码: 我是选择把所有的js代码下载了.  开发环境不要选择压缩,可以另外压缩一个,这样就两个js文件: ===先去修复下bug 后期再补充

Echarts常用图学习

学习了两个多月的PeopleSoft,感觉刚刚摸到了门槛,可惜目前没有项目,没有可以更深入学习的机会,此时手头上接到一个JAVA的项目 ̄□ ̄||,但总算不用早上搞PeopleSoft,晚上搞JAVA(身心疲惫啊),相信以后的进度会有所提升.感谢老师一直以来的指导,让我有了更加明确的目标,以后还要更加努力才行!!! 标题组件标题负责显示整个图表的标题1.Text:标题文字2.Subtext:子标题3.Left,top,right,bottom标题的位置4.borderColor:边框颜色5.bor

Echarts 柱状图配置详解

柱状图比如做成如下所示图: 所有的基本配置如下: // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 'red' }, subtext: '副标题', subtextStyle: { color: 'blue' }, padding: [0, 0, 10, 100] // 位置 }, // ---- legend ---- legend: { type: 'plain',

echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色

方法: 1 function barCharShow(curr_dim,divId,result_data){ 2 mutilDim(curr_dim);//维度信息 3 var paint = initEcharts(echarts,divId); 4 var option = buildStandardBar(); 5 option.xAxis[0].data=result_data.xAxis_data; 6 option.series[0].data= result_data.data;

echarts 柱状图+折线+文字倾斜及省略

效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>柱状图.折线图</title> 6 <script src="js/jquery-2.2.3.min.js"></script> 7 <script src="

Echarts 柱状图组

通过Echarts可以实现柱状图组,如下图:是一个学生三次模考成绩对比结果 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script>

echarts柱状图当数据为0时不显示0

在series --> label 中添加属性 fromatter 需求:echarts中的柱状图当数据为0时,显示数字0,影响美观(如图) 添加代码:(注意:series中的多个数组都要添加这个属性,少一个都不行!!!) formatter: function (params) { if (params.value > 0) { return params.value; } else { return ''; } }, 代码所在位置 + 修改后样式如下: 原文地址:https://www.c

Echarts柱状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ECharts-基本线性图及其配置要求</title> <script src="js/esl.js" type="text/javascript"></script> </head&

ECharts实例开发学习笔记二——时间轴

记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数. 官网demo: [html] view plain copy <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;chars