ECharts开源图表实例

1、折线图

ECharts折线图实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表折线图实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '温度'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['度数']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '度数',
            type: 'line',
            data: [15, 21, 20, 25, 30, 23]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
2、多线折线图

ECharts多线折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表多线折线图实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'line',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'line',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
3、柱状图

ECharts柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表柱状图实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'bar',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
4、堆叠柱状图

ECharts堆叠柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表堆叠柱状图实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'bar',
            stack: '环境',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            stack: '环境',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
5、横向柱状图

ECharts横向柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表横向柱状图实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {},
        yAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        series: [{
            name: '温度',
            type: 'bar',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
6、饼状图

ECharts饼状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表饼状图实例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 400px;height: 400px;"></div>
</body>
<script>
    var mechart = echarts.init(document.querySelector("#main"));
    mechart.setOption({
        title: {
            text: '违章车辆占比统计'
        },
        grid: {},
        legend: {
            data: ['有违章', '无违章'],
            y: 'bottom'
        },
        series: [{
            name: '消息分析',
            type: 'pie',
            radius: '55%',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontWeight: 400,
                        fontSize: 16
                    },
                    formatter: '{b}{d}%'
                }
            },
            data: [{
                name: '有违章',
                value: 30
            }, {
                name: '无违章',
                value: 70
            }],
            color: ['red', 'blue']
        }]
    });
</script>
</html>
7、环形图

ECharts环形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表环形图实例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 500px;height: 500px;"></div>
</body>
<script>
    var mechart = echarts.init(document.querySelector("#main"));
    mechart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                //强调
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 335,
                name: '直接访问'
            }, {
                value: 310,
                name: '邮件营销'
            }, {
                value: 234,
                name: '联盟广告'
            }, {
                value: 135,
                name: '视频广告'
            }, {
                value: 1548,
                name: '搜索引擎'
            }]
        }]
    });
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值