Echarts基础

叶子上的考拉

已于 2023-12-13 17:23:58 修改

阅读量919

点赞数 16

分类专栏：前端HTML 文章标签： echarts javascript 前端

于 2023-12-13 17:22:47 首次发布

本文链接：https://blog.csdn.net/qq_42260493/article/details/134977577

版权

前端HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Echarts基础

1.echarts案例1-最简配置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts案例1</title>
    <script src="./js/echarts.js"></script>
</head>

<body>
    <div class="box">
        <!-- 指定图表容器，必须指定宽高，否则图表不会显示 -->
        <div id="main" style="width: 600px;height: 400px;"></div>
    </div>
    <script>
        //初始化echarts，指定图显示在哪个容器上
        var myChart = echarts.init(document.getElementById("main"))

        //图最基本配置
        var option = {
            //x轴
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
            }
            //y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
            , yAxis: {}
            //具体数据
            , series: [
                //第一组数据
                {
                    name: '销量',  // 系列名称
                    type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容
                }
            ]
            //趋势：折线图，年和年之间的对比选择柱状图，占比选择饼图
        }
        //将图配置显示到容器中
        myChart.setOption(option)
    </script>
</body>

</html>

2.echarts案例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts案例2</title>
    <script src="./js/echarts.js"></script>
</head>
<style>
    /* 使用flex布局调整div位置 */
    .box {
        width: 100%;
        height: 860px;
        display: flex;/*指定flex布局*/
        flex-wrap: wrap;/*指定换行*/
        justify-content: space-around;/**/
    }
</style>

<body>
    <div class="box">
        <!-- 指定图容器 -->
        <div id="main" style="width: 600px;height: 400px;"></div>
        <div id="main2" style="width: 600px;height: 400px;"></div>
        <div id="main3" style="width: 600px;height: 400px;"></div>
        <div id="main4" style="width: 600px;height: 400px;"></div>
    </div>
    <script>
        //初始化echarts，指定图显示在哪个容器上
        var myChart = echarts.init(document.getElementById("main"))

        //图表配置
        var option = {
            title: {
                text: "标题"
            }
            //提示信息配置
            , tooltip: {}
            //图例配置
            , legend: {}
            , legend: {}
            //x轴
            , xAxis: {
                // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
            }
            //y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
            , yAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
            }
            //具体数据
            , series: [
                //第一组数据
                {
                    name: '销量',  // 系列名称
                    type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容
                },
                //第二组数据
                {
                    name: '销量2',  // 系列名称
                    type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容
                },
                //第三组数据
                {
                    name: '系列1',  // 系列名称
                    type: 'line',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容
                }
            ]
        }

        //将图配置显示到容器中
        myChart.setOption(option)

        //初始化echarts，指定图显示在哪个容器上
        var myChart2 = echarts.init(document.getElementById("main2"))
        //图基本配置
        var option2 = {
            title: {
                text: "标题"
            }
            //提示信息配置
            , tooltip: {}
            //图例配置
            , legend: {}
            //x轴
            , xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
            }
            //y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
            , yAxis: {}
            //具体数据
            , series: [
                //第一组数据
                {
                    name: '销量',  // 系列名称
                    type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容
                },
                //第二组数据
                {
                    name: '销量2',  // 系列名称
                    type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容
                },
                //第三组数据
                {
                    name: '系列1',  // 系列名称
                    type: 'line',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
                    data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容
                }
            ]
        }

        //将图配置显示到容器中
        myChart2.setOption(option2)
        
        //配置第三个图表
        var myChart3 = echarts.init(document.getElementById("main3"))
        myChart3.setOption(option)
        //配置第四个图表
        var myChart4 = echarts.init(document.getElementById("main4"))
        myChart4.setOption(option2)
    </script>
</body>

</html>

叶子上的考拉

关注

16
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Echarts基础

Echarts基础1.echarts案例1-最简配置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫