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名词解析
