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} ({d}%)" }, 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入门基础学习笔记