【高级课程笔记】—— Echarts高级应用（一）

最新推荐文章于 2024-05-19 09:20:03 发布

柳柳Elena

最新推荐文章于 2024-05-19 09:20:03 发布

阅读量847

点赞数

文章标签：大数据 python java 数据可视化 dataset

本文链接：https://blog.csdn.net/qq_34235864/article/details/120878687

版权

一、多坐标轴多坐标轴的常见应用就是一个坐标系有两个y 轴多坐标轴的设置方法：在yAxis 中写入两组数据，让两组数据的行数保持一致在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联<!DOCTYPE html><html lang="en"><head> <meta charset=...

摘要由CSDN通过智能技术生成

一、多坐标轴

多坐标轴的常见应用就是一个坐标系有两个y 轴

多坐标轴的设置方法：

在yAxis 中写入两组数据，让两组数据的行数保持一致
在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多坐标轴</title>
    <style>
        #main{
            margin: 20px;
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="../js/echarts.min.js"></script>
<script>
    /*基于准备好的dom，初始化echarts实例*/
    const myChart = echarts.init(document.getElementById('main'));

    /*指定图表的配置项和数据*/
    const option = {
        /*图例*/
        legend:{data:['学习人数','就业人数']},
        /*提示*/
        tooltip:{},
        /*x 轴*/
        xAxis:{
            data:['html','css','js']
        },

        /*y 轴
        *   name 坐标轴名称
        *   min 刻度最小值
        *   max 刻度最大值
        *   interval 强制设置坐标轴分割间隔
        * */
        yAxis:[
            {name:'学习人数',min:0,max:50,interval:50/5},
            {name:'就业人数',min:0,max:900,interval:900/5}
        ],

        /*系列列表 series
        *   yAxisIndex 当前系列对应的y 轴的索引位置
        * */
        //行数：5
        //学习人数：min:0,max:50,interval:50/5
        //就业人数：min:0,max:900,interval:900/5
        series:[
            {
                name:'学习人数',
                yAxisIndex:0,
                type:'bar',
                data:[30,20,40],
            },
            {
                name:'就业人数',
                yAxisIndex:1,
                type:'bar',
                data:[330,450,850],
            }
        ]
    };

    // 基于配置项显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

二、异步数据(数据更新)

对于请求数据的方式，ajax、fetch 都可以，这是js 基础，就不再多说

数据的更新有两种思路：

请求到数据后，setOption()
先setOption()，有什么配置什么。请求到数据后，再追加配置

注：在数据加载的过程中，还可以使用loading

显示 loading：showLoading()
隐藏 loading：hideLoading()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步数据</title>
    <style>
        #main{
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
    const myChart = echarts.init(document.getElementById('main'));
    fetch('./js/China.json')
        .then((res) => res.json())
        .then(data => {
            /*注册地图*/
            echarts.registerMap('china', data);
            /*配置项*/
            const option = {
                title: {
                    text: '中国地图',
                    left:'center'
                },
                series: {
                    type: 'map',
                    map: 'china'
                }
            };
            /*基于配置项显示图表*/
            myChart.setOption(option);
        })

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步数据</title>
    &l

最低0.47元/天解锁文章

柳柳Elena

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
【高级课程笔记】—— Echarts高级应用（一）

一、多坐标轴多坐标轴的常见应用就是一个坐标系有两个y 轴多坐标轴的设置方法：在yAxis 中写入两组数据，让两组数据的行数保持一致在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联<!DOCTYPE html><html lang="en"><head> <meta charset=...
复制链接

扫一扫