ECharts图表

官方文档：https://echarts.apache.org/zh/theme-builder.html

教程：https://www.runoob.com/echarts/echarts-tutorial.html

<script src="echarts.min.js"></script>//引入文件

图标使用主题

导入使用的主题

<script src="macarons.js"></script>

初始化的时候放主题名称

条形案列

<div id="main" style="width: 600px;height: 400px">//设置指定大小的div

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例 上面的div
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '商品销量'//标题
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

标题

//为图表配置标题：
title: {
    text: '第一个 ECharts 实例'
}

提示

//提示消息
tooltip: {},

x配置项

//配置要在 X 轴显示的项:
xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

y配置项

//配置要在 Y 轴显示的项。
yAxis: {}

系列列表

//每个系列通过 type 决定自己的图表类型:
series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

图标类型

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

自定义提示

自定义提示
tooltip: {
            trigger: 'item',
            formatter: function(params)
            {
			//moth月  params.name=xAxis: {data: motharr}  //params.data 显示的数据
                return moth +'月'+params.name+ '日'+' : '+params.data+'度'; //将小数转化为百分数显示
            }
        }

设置左边数值

把左边的值设置的高一点

请求数据放到折线图标

数据图

请求得到数据放入设置数据中

        var time;
        if (moth >= 10) {
            time = year + "" + moth + "" + 01;
        } else {
            time = year + "" + "0" + moth + "" + "0" + 1;
        }
$.get("http://111.231.75.86:8000/api/provinces/CHN/TW/daily/", function (data) {
            var sz = data;
            var se = [];//保存确诊人数
            for (var i = 0; i < sz.length; i++) {
                if (sz[i].dateId >= time) {//循环得到确诊人数
                    se.push(sz[i].currentConfirmedCount);
                }
            }

            var divn = document.querySelector("#d1");
            var tubiao = echarts.init(divn, 'macarons');
            var option = {
                title: {
                    x: 'center',
                    text: '台湾确诊人数'//标题
                },
                tooltip: {},
                xAxis: {
                    data: motharr
                },
                yAxis: {
                    max: '5000'
                },
                series: [{
                    type: 'line',
                    data: se
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return moth + '月' + params.name + '日' + ' : ' + params.data + '人'; //将小数转化为百分数显示
                    }
                },
                grid: {
                    x: 50,
                    y: 50,
                    x2: 0,
                    y2: 30
                }
            };
            tubiao.setOption(option);
        })

饼图统计图

ajax请求全球疫情数据

//全球疫情确诊人数
        $.get("http://111.231.75.86:8000/api/countries/", function (da) {
            var coun = da;
            var coname = [];//国家
            var councount = [];//确诊人数
            for (var i = 0; i < coun.length; i++) {
                coname.push(coun[i].countryName);
                //保存国家名 和 人数   {name:国家，value:人数}
                councount.push({name:coun[i].countryName,value:coun[i].currentConfirmedCount});
            }
            console.log(coname)
            var qxrs = document.querySelector("#d2");
            var tjrs = echarts.init(qxrs, 'macarons');
            option = {
                title: {
                    text: '全球确诊人数',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: coname//国家名
                },
                series: [
                    {
                        name: '国家',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: councount,//确诊人数(包括了国家名)
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            tjrs.setOption(option);
        });