Echart3

来源：互联网发布：广州红砖厂淘宝摄影编辑：程序博客网时间：2024/06/02 00:49

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"><title>PieChartDemo</title><link href="../css/all.css" rel="stylesheet" type="text/css"/></head><body><div class="container">    <div class="demo1">11</div>    <div class="demo2"></div>    <div class="demo3"></div>    <div class="demo4"></div></div><script src="../common/jquery.min.js"></script><script src="../common/echarts.js"></script><script src="../js/pieJs.js"></script></body></html>

CSS代码：

body {    margin: 0;    padding: 0;}/***************//*   Pie CSS   *//***************/.container {    display: grid;    height: 100vh;    width: 100vw;    grid-template-rows: 1fr 4fr 4fr 1fr;    grid-gap: 2px 2px;    grid-template-columns: repeat(2, 50%);}.title {    grid-row: 1/2;    grid-column: 1/span 2;    background: cornsilk;}.tail{    grid-row: 4;    grid-column: 1/span 2;    background: floralwhite;}.demo1{    grid-row: 2;    grid-column: 1;    background: cornflowerblue;}.demo2{    grid-row: 2;    grid-column: 2;    background: goldenrod;}.demo3{    grid-row: 3;    grid-column: 1;    background: azure;}.demo4{    grid-row: 3;    grid-column: 2;    background: aliceblue;}

JS代码：

$(function(){    paintPie();})/*绘制圆环图:该种方式是先渲染再加载数据;Echart是以数据为驱动的*/function paintPie(){    var pieChart = echarts.init($('.demo1')[0]);//JQuery=>DOM    var rich = {        yellow: {            color: "#ffc72b",            fontSize: 14,            padding: [5, 4],            align: 'center'        },        total: {            color: "#ffc72b",            fontSize: 14,            align: 'center'        },        white: {            color: "#fff",            align: 'center',            fontSize: 12,            padding: [21, 0]        },        blue: {            color: '#49dff0',            fontSize: 14,            align: 'center'        },        hr: {            borderColor: '#0b5263',            width: '100%',            borderWidth: 1,            height: 0,        }    }    option = {        tooltip: {//提示框，hover时提示信息，内容通过设置formatter            trigger: 'item',            //position: 'inside',            formatter: '{d}',            textStyle: {                color: '#00ffff'            }        },        backgroundColor: '#136699',//画布背景颜色        title: {            text:'学生总数',            left:'center',            top: '53%',            textStyle:{                color:'#fff',                fontSize:12,                align:'center'            }        },        series: [{            name: '专业选课人数',//用于tooltip的显示            type: 'pie',            radius: ['42%', '75%'],            hoverAnimation: true,//hover时放大选中的扇区            hoverOffset: 5,//偏移量            avoidLabelOverlap: true,//防止标签重叠的策略            color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],            label: {//饼图图形上的文本标签                normal: {show: true},            },            labelLine: {//标签的视觉引导线样式                normal: {                    length: 55,                    length2: 0,                    lineStyle: {                        color: '#0b5263'                    }                }            },            silent: false,//图形是否不响应和触发鼠标事件,true时hoverAnimation无效            data: []        }]    };    pieChart.showLoading();    //使用休眠函数只是为了更好的展示loding动画    setTimeout(function(){        $.get('http://127.0.0.1:8080/api/pie/demo1').done(function(data){            option.series[0].label.normal = {                //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。formatter: '{b}: {d}'                //该实例需要结合富文本标签rich                formatter: function(params, ticket, callback) {                    var total = 0; //总数量                    var percent = 0; //占比                    data.forEach(function(value, index, array) {                        total += value.value;                    });                    percent = ((params.value / total) * 100).toFixed(1);                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';                },                rich: rich            };            option.series[0].data = data;            pieChart.setOption(option);            pieChart.hideLoading();        })    },1000);    /* 动画效果,通过事件dispatchAction触发*/    var currentIndex = -1;    setInterval(function () {        var dataLen = option.series[0].data.length;        // 取消之前高亮的图形        pieChart.dispatchAction({            type: 'downplay',//类型            seriesIndex: 0,//指定目标序列            dataIndex: currentIndex  //当前被触发项的索引        });        if(currentIndex>=dataLen-1){            currentIndex = -1;        }        currentIndex = (currentIndex + 1);        // 高亮当前图形        pieChart.dispatchAction({            type: 'highlight',            seriesIndex: 0,            dataIndex: currentIndex        });        // 显示 tooltip        pieChart.dispatchAction({            type: 'showTip',            seriesIndex: 0,            dataIndex: currentIndex        });    }, 1000);}

JAVA接口代码：

package com.do1shoje.controller.echartServer;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic class DataController {@CrossOrigin@RequestMapping(value = "/api/pie/demo1")public List returnPieDemo1Data() {String[] name = {"计算机","高等数学","现代史","经济学原理","机器学"};int []value = {122,200,300,123,500};List list = new ArrayList();for(int i=0;i<5;i++) {Map m = new HashMap();m.put("name",name[i]);m.put("value", value[i]);list.add(m);}return list;}}

阅读全文

0 0