echarts 例項 (二:呼叫時,渲染)
阿新 • • 發佈:2019-01-24
<div class="chart-pic"> <div id="divMain_$commonName$" class="chart"></div> </div> <!-- ECharts單檔案引入 --> <script type="text/javascript" src="<c:url value="/scripts/echarts/echarts.js"/>"></script> <script type="text/javascript"> $.ajax({ // url:"${ctx}/pages/EgnChart/getDatasetById.do", url:"${ctx}/backoffice/Unitinfo/subJson.do", async:false, type:"post", data:"widgetId="+widgetId+"&jsonset="+jsonset, success: function(data){ ajaxData = data; eval("setData_"+commonName+"()"); } }); //設定資料 function setData_$commonName$(){ var xAxisDataJson_$commonName$ = []; var seriesDataJson_$commonName$ = []; $.each(ajaxData,function(index,obj){ xAxisDataJson_$commonName$.push(obj.name); seriesDataJson_$commonName$.push(obj.code); }); // 路徑配置 require.config({ paths: { echarts: '/crsWebApp/scripts/echarts' } }); require( [ 'echarts', 'echarts/chart/bar' ], function(ec){ // 基於準備好的dom,初始化echarts圖表 var myChart_$commonName$ = ec.init(document.getElementById('divMain_$commonName$')); // 為echarts物件載入資料 myChart_$commonName$.setOption({ tooltip: { trigger: 'item' }, toolbox: { show: true, feature: { saveAsImage: {show: true} } }, // calculable: true, grid: { borderWidth: 0, x:20,//直角座標系內繪圖網格左上角橫座標 x2:20, y: 30, y2: 30 }, xAxis: [ { type: 'category', show: false, data: xAxisDataJson_$commonName$, axisLabel:{ interval:0,//X座標顯示內容非自動 textStyle:{ fontSize:11 } } } ], yAxis: [ { type: 'value', show: true } ], series: [ { name: '$chartTitle$', type: 'bar', itemStyle: { normal: { color: function(params) { var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: '{b}\n{c}', textStyle : { fontSize : 10, } } } }, data: seriesDataJson_$commonName$ } ] }); //自適應大小 window.onresize = myChart_$commonName$.resize; } ); } </script>