echart-20170209靜態數據-柱圖/餅圖展示-個人練習

2024-04-27 15:19:25

字體：大中小

來源：轉載

供稿：網友

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title></head><body> <div id="main" 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' } }); //4、<script>標簽內動態加載echarts和所需圖表， //回調函數中可以初始化圖表并驅動圖表的生成，option見API & Doc --> // 使用 require( [ 'echarts', 'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載 'echarts/chart/pie' ], function (ec) { // 基于準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); var option1 = { tooltip: { show: true }, legend: { data:['銷量'] }, xAxis : [ { type : 'category', data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"銷量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; var option2 = { title : { text: '驗資分布統計', subtext: '實時統計', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} (70qarhlowxag%)" }, legend: { orient : 'vertical', x : 'left', data:['新增驗資數量', '復核中驗資數量','工商審批中驗資數量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'訪問來源', type:'pie', radius : '55%', center: ['50%', '60%'], itemStyle : { normal : { label : { // position : 'inner', formatter : function (params) { return params.name+ (params.percent - 0).toFixed(0) + '%' } }, labelLine : { show : true } } }, data:[ {value:300, name:'新增驗資數量'}, {value:500, name:'復核中驗資數量'}, {value:200, name:'工商審批中驗資數量'}, ] } ] }; // 為echarts對象加載數據 myChart.setOption(option2); } ); </script> </body></html>

上一篇：在React+Babel+Webpack環境中使用ESLint

下一篇：慕課網Vue.js入門基礎學習筆記