你倒是敲代码啊.
你倒是敲代码啊.

echarts前端绘制统计图

修改坐标的值

  • 主要内容就是option当中的内容，通过ajax响应的JSON转化为x、y两个对应的数组对option的内容赋值即可
<%--
  Created by IntelliJ IDEA.
  User: JiadeChen
  Date: 2020/7/13/0013
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <script
            src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous">script>
    <script type="text/javascript">
    script>
    <title>title>
head>
<body style="height: 50%; margin: 0">
<div id="container" style="height: 50%">div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js">script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js">script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    $(function () {
        $("#button").click(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/demo/table/chart",
                success: function (result) {
                    console.info(result);
                    let array1 = new Array();
                    let array2 = new Array();
                    let count = 0;
                    for (let key in result) {
                        array1[count++] = key;
                    }
                    count = 0;
                    for (let key in result) {
                        array2[count++] = result[key];
                    }

                    var option = myChart.getOption();
                    option.xAxis[0].data = array1;
                    option.series[0].data = array2;
                    myChart.setOption(option);
                }
            })
        })
    });
script>
<button type="button" id="button">点我button>
body>
html>
  • springmvc代码内容
    @RequestMapping(value = {"/chart"})
    public @ResponseBody Map<String, Object> getChart() {
        Map<String, Object> map = new HashMap<>(5);
        map.put("A", 10);
        map.put("B", 15);
        map.put("C", 30);
        map.put("D", 40);
        map.put("E", 20);
        return map;
    }

修改样式

  • 修改series[0].type属性可以修改样式，但是会造成即使是变成了饼状图，xy轴依旧存在
  • 解决办法：使用xAxis和yAxis当中的show以及splitLine属性来隐藏xy轴
xAxis: {
   type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitLine: {
        show: false
    },
    show: false
},
yAxis: {
    type: 'value',
    splitLine: {
        show: false
    },
    show: false
}
  • 随着图表的样式的修改，可以发现如果还是按照修改折线图那样修改图表当中的数据显然是不行的，因此我们需要参照echart官网的图表可以解析的数据格式对data进行赋值。

你可能感兴趣的:(web前端)