echarts知识点

最新推荐文章于 2023-04-20 10:59:51 发布

依墨~

最新推荐文章于 2023-04-20 10:59:51 发布

阅读量89

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_62073591/article/details/126454607

版权

echarts 常用组件

组件以对象元素的形式写在option中，以达到配置图标的目的。

标题 title

包含以下属性：

主标题 text
副标题 subtext
位置 left
主标题样式 textStyle
副标题样式 subtextStyle
可见性 show

绘图步骤

建立dom容器
引入Echarts
实例化Echarts
建立图表配置项
显示图表

<!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>Document</title>
    <script src="./echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="./echarts/i18n/langZH.js"></script>
    <!-- <style>
        #main{
            width: 800px;
            height: 600px;
        }
    </style> -->
</head>

<body>
    <div id="main"></div>
    <script>
        //1.获取到div
        var main = document.getElementById("main")
        //2.初始化图表
            //第一种情况：此情况是已经以前给图标容器设置好大小
        // var myEcharts = echarts.init(main)
            //第二种：在未指定图表容器大小时可以再图表初始化时给容器指定大小
        var myEcharts = echarts.init(main,null,{
            width:800,
            height:600
        })
        //3.设置数据及格式
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
            }]
        };
        //4.
        myEcharts.setOption(option)
        //实现响应式容器大小的改变
        window.onreset = function(){
            myEcharts.resize()
        }
    </script>
</body>

</html>

练习案例

<!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>Document</title>
    <script src="./echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="./echarts/i18n/langZH.js"></script>
</head>
<body>
    <div id="main"></div>
    <script>
        //1.获取到div
        var main = document.getElementById("main")
        //2.初始化图表
            //第一种情况：此情况是已经以前给图标容器设置好大小
        // var myEcharts = echarts.init(main)
            //第二种：在未指定图表容器大小时可以再图表初始化时给容器指定大小
        var myEcharts = echarts.init(main,null,{
            width:800,
            height:600
        })
        //3.设置数据及格式
        option = {
            title:{
                show:true,
                text:"产品销量图"
            },
            legend:{
                //强行设置文本为红色
                icon:'circle',
                //设置文本为红色
                textStyle:{
                    color:'red',
                    fontSize:20
                },
                /* orient:"Horizontal",
                top:20 */
            },
            dataset:{
                source:[
                    ['月份','降水量','温度'],
                    ['1月',2.7,-3.7],
                    ['2月',4.9,-0.7],
                    ['3月',8.3,5.8],
                    ['4月',21.2,14.2],
                    ['5月',32.2,19.9],
                    ['6月',78.1,24.4],
                    ['7月',185.2,26.2],
                    ['8月',159.7,24.8],
                    ['9月',45.5,20.0],
                    ['10月',21.8,13.1],
                    ['11月',7.4,4.6],
                    ['12月',2.8,-1.5],
                ]
            },
            xAxis: {
                type: 'category',
                name:"月份"
            },
            yAxis: [{
                type: 'value',
                name:"降水量"
            },{
                type: 'value',
                name:"温度"
            }],
            series: [
                {
                    type: 'bar',
                    yAxisIndex:0
                },
                {
                    type: 'line',
                    yAxisIndex:1
                }, 
            ]
        };
        //4.
        myEcharts.setOption(option)
        //实现响应式容器大小的改变
        window.onreset = function(){
            myEcharts.resize()
        }
    </script>
</body>
</html>