Echarts举例

var source=0;/** * 在页面初始化加载时调用饼图方法 getData() */$(document).ready(function() {getData();});/** * 此方法请求是加载绘制图形的数据 参数可选 */function getData() {/** * 此post请求是加载绘制饼图的数据 */$.post("/coalTapePrice/getCoalTapePrice.json", {}, function(data) {var jsonObj = eval(data);if (jsonObj == '' ) {alert("没有数据,请选择其它选项");}var year = new Date().getFullYear();var startValue = year + "-" + (new Date().getMonth() + 1) + "-01";setHistogram(jsonObj, year,startValue);}, "json");}function setHistogram(jsonObj, year,startValue) {// 初始容器有大小问题，所以调用这个方法可以解决autoHeight();var chart = echarts.init(document.getElementById('main'));// 调用自适应方法var myCharts = [ chart ];autoDivSize(myCharts);var str='';var str2='';var coalType2;var reCoalType ='';var month;var price;var titleName = '';//得到不同煤种名称数据for(var i = 0 ; i < jsonObj.length ; i++){str2 +="'"+jsonObj[i].coalType+"',";}//截取str2最后一个逗号之前的数据var msg2 = str2.substring(0, str2.lastIndexOf(','));coalType2=eval("(["+msg2+"])");month=eval(jsonObj[0].month);if(jsonObj !=''){titleName = jsonObj[0].titleName;reCoalType = jsonObj[0].coalType;}//拼接不同煤种名称及其价格数据for(var i = 0 ; i < jsonObj.length ; i++){str +="{name:'" + jsonObj[i].coalType +"', type:'line',data:"+ jsonObj[i].price+"},";}//截取str最后一个逗号之前的数据var msg = str.substring(0, str.lastIndexOf(','));price=eval("(["+msg+"])");           var option = {title: {        text: titleName+'各煤种价格',        padding: [5, 10],        x: 'center',        top: '2%',        subtext: year+'年内采数据'    },    tooltip : {        trigger: 'axis'    },    toolbox: {        show : true,        orient: 'vertical',        top: '20%',        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType: {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true},            myTool1 : {show : true,title : '小眼睛             ',icon : 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',onclick : function() {toPriceAnalyze();}},myTool2 : {show : true,title : '放大              ',icon : 'image://../../js/img/big.ico',onclick : function() {option.toolbox.feature.myTool2.show = false;option.toolbox.feature.myTool3.show = true;chart.setOption(option);var iframe = window.frameElement;var id = $(iframe).parent().attr('id');parent.amplification(id);}},myTool3 : {show : false,title : '缩小              ',icon : 'image://../../js/img/reset.ico',onclick : function() {option.toolbox.feature.myTool2.show = true;option.toolbox.feature.myTool3.show = false;chart.setOption(option);var iframe = window.frameElement;var id = $(iframe).parent().attr('id');parent.shrink(id);}}        }    },    dataZoom : [ {startValue : startValue}, {type : 'inside'} ],    calculable : true,    legend: {        //right: '87%' ,        //align :'left',        //bottom : '15%',        data:coalType2    },    xAxis : [        {            type : 'category',            data : month        }    ],    yAxis : [        {            type : 'value',            name : '价格',            axisLabel : {                formatter: '{value} 元/吨'            }        }    ],    series :price};    // 为echarts对象加载数据 chart.setOption(option);chart.on('click', queryCoalType);function queryCoalType(params) {    reCoalType = params.seriesName;    invoking(reCoalType);}invoking(reCoalType);}