echarts之折线图、条形图、饼图

最新推荐文章于 2023-02-03 21:47:49 发布

San**

最新推荐文章于 2023-02-03 21:47:49 发布

阅读量793

点赞数

本文链接：https://blog.csdn.net/weixin_45793065/article/details/106996533

版权

echarts官网https://echarts.apache.org/zh/index.html

Echarts是什么

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

1、折线图

折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。
1、步骤

1）引入Echarts

echarts.min.js本地下载地址https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js
如果打不开
在C:\Windows\System32\drivers\etc的hosts添加
修改不了就右击–>属性–>安全–>组或用户名 -->编辑–>点上修改。再永济市本打开hosts添加

199.232.68.133 raw.githubusercontent.com

在这里插入图片描述
2）为 ECharts 准备一个具备高宽的 DOM 容器

3）绘制图表

2、基本框架

echarts.min.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>猪圈</title>
    <!--第一种方法， 引入本地 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <!--第二种方法  引入CDN ECharts 文件,二选一即可 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
</head>

<body>
    <div id="xx" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('xx'));

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

3、完整代码
echarts.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>猪圈</title>
    <!--第一种方法， 引入本地 ECharts 文件 -->
    <script src="static/js/echarts.min.js"></script>
    <!--第二种方法  引入CDN ECharts 文件,二选一即可 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
</head>

<body>
    //为 ECharts 准备一个具备高宽的 DOM 容器
    <div id="line" style="width: 600px;height:400px;"></div>
    <div id="bar" style="width: 600px;height:400px"></div>
    <div id="pie" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var line_chart = echarts.init(document.getElementById('line'));

        // 指定图表的配置项和数据
        var line_option = {
            title: {
                text: '未来一周气温变化',
                textStyle: {
                    color: "#333",
                    fontStyle: 'italic', //主标题文字字体的风格'normal''italic''oblique'
                    fontWeight: 'lighter', //主标题文字字体的粗细'normal''bold''bolder''lighter'100 | 200 | 300 | 400...
                    fontFamily: 'serif', //主标题文字的字体系列还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                    fontSize: 20
                }
            },
            legend: {
                data: ['最高气温', '最低气温']
            },
            tooltip: {
                show: true,
                trigger: 'axis' //交互
            },
            //工具栏
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: "category",
                data: ["Mon", "Tue", "Web", "Thu", "Fri", "Sat", "Sun"],
                boundaryGap: false //是否留空

            },
            yAxis: {
                tyrp: 'value',
                axisLabel: {
                    formatter: '{value} °C '
                }
            },
            series: [{
                    name: "最高气温",
                    data: [11, 11, 15, 13, 12, 13, 10],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }, //填充
                    smooth: true, //线平滑
                    markPoint: {
                        data: [{
                            type: "max",
                            name: "最大值"
                        }, {
                            type: "min",
                            name: "最小值"
                        }]
                    },
                    markLine: {
                        data: [{
                            type: "average",
                            name: '平均值'
                        }]
                    }
                }, {
                    name: "最低气温",
                    data: [1, -2, 2, 5, 3, 2, 0],
                    type: 'line',
                    areaStyle: {

                    }, //填充
                    smooth: true, //线平滑
                    markPoint: {
                        data: [{
                            name: "周最低",
                            value: -2,
                            xAxis: 1,
                            yAxis: -1.5
                        }]
                    },
                    markLine: {
                        data: [{
                            type: "average",
                            name: '平均值'
                        }]
                    }
                },

            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        line_chart.setOption(line_option);
        //基于准备好的demo，初始化echarts实例
        var bar_chart = echarts.init(document.getElementById('bar'));
        var bar_option = {
            backgroundColor: '#d0e4fe', //背景颜色
            color: '#ebabab', //条颜色

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ["直接访问"]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {},
                barWidth: 30  //条状宽度
            }]
        };
        bar_chart.setOption(bar_option)

        //基于准备好的dom,初始化echarts实例
        var pie_chart = echarts.init(document.getElementById("pie"))
        var pie_option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '70%'],
                center: ['50%', '60%'],
                data: [{
                    value: 335,
                    name: '直接访问'
                }, {
                    value: 310,
                    name: '邮件营销'
                }, {
                    value: 234,
                    name: '联盟广告'
                }, {
                    value: 135,
                    name: '视频广告'
                }, {
                    value: 1548,
                    name: '搜索引擎'
                }],
                label: {
                    show: true,
                    //position: "center"
                },

                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
            }]
        };
        pie_chart.setOption(pie_option);
    </script>
</body>

</html>

在这里插入图片描述

其他属性官网都有可以去查找https://echarts.apache.org/zh/option.html#title

San**

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts之折线图、条形图、饼图

echarts官网https://echarts.apache.org/zh/index.htmlEcharts是什么ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据
复制链接

扫一扫