echarts3.6
1.<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
<div id="barMain" style="height:400px"></div>
 
function loadEcharts(){
 
//初始化
 
var myChart = echarts.init(document.getElementById('barMain'));
 
//指定图表的配置项和数据
 
　var option = {
 title：{},//标题
tooltip:{},//提示框
legend:{},
grid:{},
xAxis : [],//x轴
yAxis : [],//y轴
series : []//数据、echarts类型(曲、柱、饼)
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
 
}
 
}

2.例子

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
 
</head>
<body>
<div id="barMain" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
　　paths: {
　　　　echarts: 'http://echarts.baidu.com/build/dist'
　　}
});
// 使用
require(
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);
function drawEcharts(ec){
loadEachatrs(ec);
　　//drawLine(ec);
}
function loadEachatrs(ec){
　var myChart = ec.init(document.getElementById('barMain'));
　var option = {
title : {//标题
text: '产品库存关系图',
subtext: '数据来自瞎编',
x: 'center',
align: 'right'
},
 
tooltip:{//鼠标悬浮在柱状图/曲线图上是否加载提示框
　show: true
},
legend:{
data:["种类","物品"],
x: 'left',
y:30,
padding:[5,35,5,5]
},
grid:{//控制图形区域与图表容器之间的间隔，就是绘图区与id为barMain的div的占比http://www.mamicode.com/info-detail-1556089.html
"borderWidth":0,
top:100,
containLabel:true
},
xAxis : [
　　　　{
　　　　　 type : 'category',
name:"数据",
　　　　　　data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel:{//加这个x轴显示字体是倾斜状的
interval:0,
rotate:-30
}
 
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　 name: '个数',
type: 'value',
max: 50
　　　　}
　　],
series : [
　　　　{
　　　　　　"name":"种类",
　　　　　　"type":"line",//曲线图
　　　　　　"data":[5, 20, 40, 10, 10, 20],
 
　　　　},{
　　　　　　"name":"物品",
　　　　　　"type":"bar",//柱状图
　　　　　　"data":[25, 20, 20, 20, 10, 20],
itemStyle:{normal:{label:{show:true,position:'top'}}}
　　　　}
　　]
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
 
}
</script>
</body>

///////////////////////////////////////////////////////////////////////////////////////////////////注释////////////////////////////////////////////////////////////////////////////////////

series 里面name的值要和legend里面data值一样，不然在实现点击legend时，图形不会出现点击消失点击显示的功能

例子三:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
　　paths: {
　　　　echarts: 'http://echarts.baidu.com/build/dist'
　　}
});
// 使用
require(
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);
 
function drawEcharts(ec){
　　drawBar(ec);
　　drawLine(ec);
}
function drawBar(ec){
　　var myBarChart = ec.init(document.getElementById('barMain'));
　　var option = {
　　　　tooltip: {//提示功能
　　　　show: true
 
　　},
　　legend: {
　　　　data:['销量']
　　},
　　xAxis : [
　　　　{
　　　　　　type : 'category',
　　　　　　data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value'
　　　　}
　　],
　　series : [
　　　　{
　　　　　　"name":"销量",
　　　　　　"type":"bar",
　　　　　　"data":[5, 20, 40, 10, 10, 20]
　　　　}
　　]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}
 
function drawLine(ec){
　　var myLineChart = ec.init(document.getElementById('lineMain'));//创建一个容器
　　var option2 = {
　　　　title : {
　　　　text: '未来一周气温变化',
　　　　subtext: '纯属虚构'
　　},
　　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 : [
　　　　{
　　　　　　type : 'category',
　　　　　　boundaryGap : false,
　　　　　　data : ['周一','周二','周三','周四','周五','周六','周日']
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value',
　　　　　　axisLabel : {
　　　　　　　　formatter: '{value} °C'
　　　　　　}
　　　　}
　　],
　　series : [//数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
　　　　{
　　　　　　name:'最高气温',
　　　　　　type:'line',
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : {//标记提示
　　　　　　　　data : [
　　　　　　　　　　{type : 'max', name: '最大值'},
　　　　　　　　　　{type : 'min', name: '最小值'}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {//标识线
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name: '平均值'}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　{
　　　　　　name:'最低气温',
　　　　　　type:'line',
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name : '平均值'}
　　　　　　　　]
　　　　　　}
　　　　}
　　]
};
myLineChart.setOption(option2,true);
}
</script>
</body>

例子四

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="myChart" style="height:500px"></div>
<div id="lineMain" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
　　paths: {
　　　　echarts: 'http://echarts.baidu.com/build/dist'
　　}
});
// 使用
require(
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);
 
function drawEcharts(ec){
InitBarChart(ec);
}
//柱状图
function InitBarChart(ec) {
   var mychart = ec.init(document.getElementById("myChart"));
    var option = null;
dataList = [
            {
 
                "总数":0,
                "监测方法":"GPS监测"
            },
            {
 
                "总数":100,
                "监测方法":"地表裂缝监测"
            },
            {
 
                "总数":100,
                "监测方法":"全站仪地表位移监测"
            },
            {
 
                "总数":100,
                "监测方法":"地面沉降监测"
            },
            {
 
                "总数":100,
                "监测方法":"钻孔倾斜仪监测"
            },
            {
 
                "总数":100,
                "监测方法":"全自动倾斜仪监测"
            },
            {
 
                "总数":100,
                "监测方法":"气温"
            },
            {
 
                "总数":100,
                "监测方法":"天气"
            },
            {
 
                "总数":100,
                "监测方法":"雨量监测"
            },
            {
 
                "总数":100,
                "监测方法":"江河水位监测"
            },
            {
 
                "总数":100,
                "监测方法":"地下水位监测"
            },
            {
 
                "总数":100,
                "监测方法":"孔隙水压力监测"
            },
            {
 
                "总数":100,
                "监测方法":"岩土日含水量"
            },
            {
 
                "总数":100,
                "监测方法":"渗透力监测"
            },
            {
 
                "总数":100,
                "监测方法":"渗流量监测"
            },
            {
 
                "总数":100,
                "监测方法":"推力监测"
            },
            {
 
                "总数":100,
                "监测方法":"锚索测力计监测"
            },
            {
 
                "总数":100,
                "监测方法":"井水"
            },
            {
 
                "总数":100,
                "监测方法":"泉水"
            },
            {
 
                "总数":100,
                "监测方法":"墙裂"
            },
            {
 
                "总数":100,
                "监测方法":"地鼓"
            },
            {
 
                "总数":100,
                "监测方法":"次声"
            },
            {
 
                "总数":100,
                "监测方法":"泥位"
            }
 
];
 
    var names = [];
    var values = [];
    var total = 0;
    var barW = 30;
    var botM = 60;
  var test ="http://echarts.baidu.com/option.html#title.link";
    for (var i = 0;i < dataList.length;i++)
    {
        names.push(dataList[i]["监测方法"]);
        values.push(dataList[i]["总数"]);
    }
 option = {
            title: {
               // show:false,//不显示标题,如果不想显示可以整个titl不写
                text: "我是主标题",//主标题
                subtext: "我是副标题",//副标题
                link:test,//给主标题加超链接
                x: "left",//主副标题在x轴左侧显示
                sublink:test,//给副标题加超链接
                //target:'self', //主标题超链接当前窗口打开
                //target:'blank', //主标题超链接新窗口打开
                //subtarget:'self', //副标题超链接当前窗口打开
                //subtarget:'blank', //副标题超链接当前窗口打开
                textStyle: {//主标题文字样式设置
                    color: '#1690cf',
                    fontSize: 14
                },
                subtextStyle: {//副标题文字样式设置
                    color: '#1690cf',
                    fontSize: 12
                },
                itemGap:10,//主副标题之间间距
                padding: [20, 0, 0, 20],//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
                top:50
            },
            legend: {//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
　　　　      //data:['个数'],//series里面的name，如果有多条曲线可以把不同曲线的name写进去data:['name1','name2']
              data: [{
                        name: '个数',
                        // 强制设置图形为圆。
                        icon: 'circle',
                        // 设置文本为红色
                        textStyle: {
                            color: 'red'
                        },
                      }],
                       bottom: 10,
            left: 'center'
　　           },
            tooltip: {//提示框组件
                //trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            },
 
            xAxis: [
                {
                    type: 'category',
                    data: names,
                    splitLine: false,
                    axisLabel: {
                        //rotate: 45,//旋转角度
                        interval: 0,//强制显示所有标签
                        textStyle: {
                            fontSize: 12,
                            color: '#333',
                            fontFamily: "微软雅黑"
                        },
                        formatter: function (val) {
                            return val.split("").join("\n");
                        }
                    },
                    axisLine: {
                        //show:false
                    },
                    axisTick: {
                        //show:false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: true,
                    show: false
                }
            ],
            series: [
                {
                    name: "个数",
                    type: "bar",
                    data: values,
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#000'
                                }
                            },
                            color:"#7977da"//更改柱子颜色
                            /*color: function (params) {//给每个柱子设置不同的颜色
                                var colorList = ['#0bd1da', '#47c588', '#45ade2', '#e87c24', '#0f6fc6', '#7977da', '#fdce0f'];
                                return colorList[params.dataIndex];
                            }*/
                        }
                    }
                }
            ],
            //noDataLoadingOption: {
            //    text: "暂无数据",
            //    effect: "bubble",
            //    effectOption: {
            //        effect: {
            //            n:0
            //        }
            //    }
            //},
            grid: {
                borderWidth: '0px',
                left: 10,
                right: 10,
                top: 80,
                bottom: 80
                //x: 0,
                //y: 0,
                //x2: 0,
                //y2:0
                //y2:0
                //left: '0%',
                //right: '10%',
                //containLabel:true
            },//去掉外围边框
            //axis: {
            //    axisLabel: {
            //        formatter: function (val) {
            //            return val.split("").join("\n");
            //        }
            //    }
            //}
        };
 
    mychart.setOption(option);
}
</script>
</body>

ECharts名词解析

Echarts(一)的更多相关文章

一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
数据图表插件Echarts（一）
一.引言最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
ECharts数据图表系统？ 5分钟上手！
目录: 前言简介方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...

随机推荐

jquery中each()的三种遍历用法
1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function ...
还在用慢的要死的百度网盘？来试试这款12.5M下载速度的免费网盘吧！
我们都知道云存储,如谷歌云端硬盘,苹果的icloud, 微软的OneDrive. 它们是用于数据备份和与多设备同步的云存储. 虽然它被广泛使用,但是还是有一些缺点,以谷歌云端硬盘为例: 1. 如果你需 ...
[UE4]蓝图比C++慢10倍，是吗？
首先,蓝图肯定是比C++慢. 任何脚本语言(需要解释执行的语言),和C++相比可能达到十倍甚至百倍的差距.比如Java.Python.Lua,JS. 脚本语言是运行在虚拟机上的,所以它们比起直接运行的 ...
github webhook 实现代码自动部署踩坑！！附加git&coding webhook部署代码
踩坑: 1.php程序执行linux命令是以webserver的user用户(如apache .www……)操作的,需要在/etc/sudoers添加用户免密码操作权限; %apache ALL=(A ...
eclipse调试的时候怎么后退？
原文转载至:https://blog.csdn.net/qq_21262611/article/details/52121270 个人分类: myeclipse 前些天和同事交流调试技巧时,知道了 ...
classpath路径配置
在很多Apache的框架中,经常遇见配置classpath情况,但是都没有认真研究过classpath,下面是对classpath的解析. classpath: 是指编译过后的的classes目录对 ...
Shiro ini配置
Shiro.ini配置: ini配置文件类似Java中的properties(key = value),不过提供了key/value分类的特性,每个部分的key不重复即可在eclipse中设置打开方 ...
tornado项目注意点
大体框架思想如果你做的项目是偏向中小型的话,MTV或者MVC已经足够支撑起整个项目,而如果你做的项目比较大大话,或者说可能以后的业务量很大的话,那你就需要用到四层架构的思想了,那么我们就各自分析下俩 ...
C program basic
郝人牛语入门最基本的方法就是从C语言入手. 当你成为C语言的高手,那么你很容易进入到操作系统的平台里面去:当你进入到操作系统的平台里去实际做程序时,就会懂得进行调试:当你懂得调试的时候,你就会发现能 ...
[转]access 标准表达式中数据类型不匹配
好久没有用access,今儿遇到一个特别让人无语的问题: access数据表的Date/Time类型的字段,假如字段名为dtime: 如果直接用dtime=‘2013/9/6 10:50:21’,sq ...

Echarts(一)

ECharts名词解析

Echarts(一)的更多相关文章

随机推荐

热门专题