Echart3

最新推荐文章于 2024-06-18 17:20:40 发布

简乐君

最新推荐文章于 2024-06-18 17:20:40 发布

阅读量1.1k

点赞数

分类专栏： WEB前端文章标签： echart3

本文链接：https://blog.csdn.net/u012557538/article/details/78557888

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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;

@RestController
public 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echart3

HTML代码： PieChartDemo 11 CSS代码：body { margin: 0; padding: 0;}/***************//* Pie CSS *//***************/.container { display: grid;
复制链接

扫一扫

专栏目录