ECharts

最新推荐文章于 2023-05-16 17:59:46 发布
最新推荐文章于 2023-05-16 17:59:46 发布
阅读量610 收藏
点赞数
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sh2001824/article/details/126442109
版权

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求

官网：https://echarts.apache.org/

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

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
        var myEcharts = echarts.init(main, null, {
                width: 800,
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            title: [{
                text: 'Tangential Polar Bar Label Position (middle)'
            }],
            polar: {
                radius: [30, '80%']
            },
            angleAxis: {
                max: 4,
                startAngle: 75
            },
            radiusAxis: {
                type: 'category',
                data: ['a', 'b', 'c', 'd']
            },
            tooltip: {},
            series: {
                type: 'bar',
                data: [2, 1.2, 2.4, 3.6],
                coordinateSystem: 'polar',
                label: {
                    show: true,
                    position: 'middle',
                    formatter: '{b}: {c}'
                }
            }
        };
        //第四部
        myEcharts.setOption(option)
    </script>
</body>

</html>

效果：

 一、柱状图

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

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
        var myEcharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        var 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',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

注：在未指定图表容器大小时，可以在图表初始化时给容器指定大小

效果：

 2.给柱状图设置样式

  • 自定义样式可以在官网点击（文档>使用手册>样式>找到主题编辑器点击就可以去设置了，设置完成后进行下载即可）
  • 全局样式：color:["颜色","颜色]
  • 局部样式：itemStyle: {color: "颜色"}

以上代码

<!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="js/echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/echarts/i18n/langZH.js"></script>
    <!-- 自定义样式 -->
    <script src="js/customed.js"></script>
    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
            // customed：<!-- 自定义样式 -->

        var myEcharts = echarts.init(main, "customed", {
                width: 800,
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            // 全局样式
            // color: ["green", "red"],

            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                // 局部样式
                data: [120, {
                    value: 200,
                    itemStyle: {
                        color: "red"
                    }
                }, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        //第四部
        myEcharts.setOption(option)
    </script>
</body>

</html>

效果：

3.设置坐标轴的样式

  •  标题：name

  • 轴线：axisLine

  • 刻度：axisTick

  • 单位：axisLabel

以上代码

<!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="js/echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/echarts/i18n/langZH.js"></script>

    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
            // customed：<!-- 自定义样式 -->

        var myEcharts = echarts.init(main, null, {
                width: 800,
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            // 全局样式
            dataset: {
                // dimensions: ["product", "2015", "2016", "2017"],
                source: [
                    ['产品', '2015', '2016', '2017'],
                    ['拿铁', 50, 80, 30],
                    ['奶茶', 85, 50, 40],
                    ['芝士可可', 20, 30, 60],
                    ['布朗尼', 60, 90, 130],

                ]
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {
                type: 'value',
                // 标题
                name: "销量",
                // nameLocation: "middle",
                // 轴线
                axisLine: {
                    // 是否显示
                    show: true,
                    symbol: ["none", "arrow"], //轴线箭头    
                    // 设置轴线样式
                    lineStyle: {
                        type: "dashed",
                        color: "red"
                    }
                },
                // axisTick:刻度
                axisTick: {
                    // 是否显示
                    show: true,
                    // 刻度长度
                    length: 6,
                    // 样式
                    lineStyle: {
                        color: "green"
                    }
                },
                // axisLabel:单位
                axisLabel: {
                    formatter: "{value}(销量)",
                    fontSize: 12,
                }
            },
            series: [{
                type: 'bar'
            }, {
                type: 'bar'
            }, {
                type: 'bar'
            }]
        };
        //第四部
        myEcharts.setOption(option)
    </script>
</body>

</html>

效果：

 4.设置样式

使用itemStyle设置（样式都和css很像）

响应式： window.onresize = function() {myEcharts.resize()}

<!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="js/echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/echarts/i18n/langZH.js"></script>
    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
        var myEcharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            // stack:堆叠
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                stack: "x",
                itemStyle: {
                    color: "green"
                },
                barWidth: "20%"
            }, {
                data: [10, 100, 60, 200, 100, 50, 20],
                type: 'bar',
                // stack: "x",
                itemStyle: {
                    color: "red",
                    borderColor: "green",
                    borderWidth: 2,
                    shadowColor: "blue",
                    borderType: "dashed",
                    // 圆角
                    barBorderRadius: 10
                }

            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = 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="js/echarts/dist/echarts.min.js"></script>
    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
            // customed：<!-- 自定义样式 -->

        var myEcharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            //
            legend: {
                // data: ["降水量", "温度"]
            },
            dataset: {
                // dimensions: ["product", "2015", "2016", "2017"],
                source: [
                    // 降水量：[2.7, 4.9, 8.3, 21.2, 34.2, 78.1, 185.2, 159.7, 45.5, 21.8, 7.4, 2.8]
                    // 温度：[-3.7, -0.7, 5.8, 14.2, 19.9, 24.4, 26.2, 24.8, 20.0, 13.1, 4.6, -1.5]
                    ["月份", "降水量", "温度"],
                    ['1月', 2.7, -3.7],
                    ['2月', 4.9, -0.7],
                    ['3月', 8.3, 5.8],
                    ['4月', 21.2, 14.2],
                    ['5月', 34.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',
            },
            yAxis: [{
                type: 'value',
                name: "降水量",
                // 轴线
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"]
                },
                // 刻度
                axisTick: {
                    show: true
                },
                // 描述单位
                axisLabel: {
                    formatter: "{value}(mL)"
                }
            }, {
                type: 'value',
                name: "温度",
                // 轴线
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"]
                },
                // 刻度
                axisTick: {
                    show: true
                },
                // 描述单位
                axisLabel: {
                    formatter: "{value}(℃)"
                }
            }],
            series: [{
                type: 'bar',
                yAxisIndex: 0
            }, {
                type: 'line',
                yAxisIndex: 1
            }]
        };
        //第四部
        myEcharts.setOption(option)
    </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="js/echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/echarts/i18n/langZH.js"></script>
    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
        var myEcharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            xAxis: {
                type: 'category',

            },
            yAxis: {
                type: 'value'
            },
            // stack:堆叠
            series: [{
                // data: [12, 60, 100, 20, 200],
                // 
                data: [
                    [20, 120],
                    [50, 180],
                    [110, 30]
                ],
                type: "line",
                label: {
                    show: true,
                    position: [10, -20]
                },
                // 设置样式
                lineStyle: {
                    color: "green",
                    type: "dashed",
                    width: 3
                }
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

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

<body>
    <div id="main"></div>
    <script>
        //获取到div
        var main = document.getElementById("main")
            //初始化图表
            //第一种情况：此种情况是已经提前给图表容器设置好大小
            //var myEcharts = echarts.init(main)
            //第二种：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示：
        var myECharts = echarts.init(main, "customed", {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        var option = {
            //此处的color是全局调色板
            color: ["green", "red", "yellow", "blue"],
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, {
                    value: 200,
                    itemStyle: {
                        color: "red"
                    }
                }, 150, 80, 70, 110, 130],
                type: 'bar'
            }],
            toolbox: {
                show: true,
                feature: {
                    //保存为图片
                    saveAsImage: {
                        show: true,
                        type: 'jpg',
                        name: '下雨量',
                        title: '保存为图片',
                        backgroundColor: 'red'
                    },
                    //数据视图
                    dataView: {
                        show: true,
                        title: '销量数据',
                        lang: ['数据视图', '关闭', '刷新'],
                        textareaColor: 'lightblue',
                        textareaBorderColor: 'lightblue',
                        backgroundColor: 'lightblue'
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar'],
                        title: {
                            line: '切换为折线图',
                            bar: '切换为柱状图'
                        }
                    },
                    dataZoom: {
                        show: true,
                        title: {
                            zoom: '区域缩放',
                            back: '区域缩放还原'
                        }
                    },
                    restore: {
                        show: true,
                        title: '还原'
                    }
                }
            },
        };
        //第四步：
        myECharts.setOption(option)
            //实现响应式容器大小的改变
        window.onresize = 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="js/echarts/dist/echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/echarts/i18n/langZH.js"></script>
    <style>
        /* div {
            width: 100%;
            height: 600px;
        } */
    </style>
</head>

<body>
    <!--  -->
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
            // 初始化图表
            // 第一种情况：此种情况是已经提前给图表容器设置好了大小
            // var myEcharts = echarts.init(main)
            //第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
        var myEcharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式（配置）
        const data = [];
        for (let i = 0; i < 6; ++i) {
            data.push(Math.round(Math.random() * 200));
        }
        var option = {
            xAxis: {
                max: 'dataMax'
            },
            yAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F'],
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: 5 // only the largest 3 bars will be displayed
            },
            series: [{
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }],
            legend: {
                show: true
            },
            animationDuration: 0,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        };

        function run() {
            for (var i = 0; i < data.length; ++i) {
                if (Math.random() > 0.9) {
                    data[i] += Math.round(Math.random() * 2000);
                } else {
                    data[i] += Math.round(Math.random() * 200);
                }
            }
            myEcharts.setOption({
                series: [{
                    type: 'bar',
                    data
                }]
            });
        }
        setTimeout(function() {
            run();
        }, 0);
        setInterval(function() {
            run();
        }, 3000);
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

 

sh2001824
关注
ECharts 之引用ECharts
Monster_G的博客
11-24 1万+
获取ECharts 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录可以找到最新版本的echarts库 通过 npm 获取 echarts，npm instal
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
ECharts图表的引用
weixin_44538667的博客
04-07 3852
ECharts图表的引用 开发工具与关键技术：Visual Studio 2015，ECharts，JS 作者：易金亮 撰写时间：2019.04.02 下面我们来介绍一下如何引用ECharts图表，引用ECharts图表大致分为以下几个步骤： 准备存放ECharts图表的“盒子” 引用“echarts.min.js”插件 初始化echarts实例 指定图表的配置项和数据 使用指定的配置项和数据...
ECharts的按需引用与简单使用
xxuxioxx的博客
05-04 677
ECharts的使用
Echarts操作：实现Echarts的引用与创建应用实例
weixin_44221475的博客
02-24 1005
ECharts：一个纯 Javascript 的图表库，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 官网：https://www.echartsjs.com/zh/index.html Step1：CDN引用echarts： 有好几种方法安装引用，个人比较喜欢CDN： 完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：ech...
引用EChart和Bootstrap
dengtangda9444的博客
11-22 200
1.怎么引用Echart 下载之后，写一个html，里面这样写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="echarts.min.js"></script> ...
ECharts2.2.7版本
最新发布
04-23
ECharts 2.2.7 是一个基于 JavaScript 的开源可视化库，用于构建交互式的数据可视化图表。它由百度前端技术部开发和维护，提供了丰富的图表类型、灵活的配置选项和强大的交互功能，可以轻松地创建各种各样的图表，...
echarts文档离线
10-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，广泛应用于Web应用的数据展示。"echarts文档离线"指的是将...
echarts 全国地图json数据
08-25
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够满足各种数据可视化需求。在这个“echarts全国地图json数据”中，我们主要讨论的是...
推荐了多个详细的echarts资源
09-26
Echarts 资源大汇总 Echarts 是一个基于 JavaScript 的数据可视化图表库，由百度株式会社开发和维护，可以轻松地在网页中添加交互式的图表。下面是推荐的多个详细的 Echarts 资源，旨在帮助开发者快速上手 Echarts ...
echarts结合echarts-gl实现3D飞线地球可视化
08-05
而ECharts-GL是ECharts的一个扩展，专门为大型数据集和3D可视化设计，使得在Web上实现高级三维图表成为可能。 本案例主要关注的是如何利用ECharts和ECharts-GL来实现3D飞线地球可视化。首先，你需要确保已安装...
echarts~echarts-gl 配套版本文件
11-02
ECharts 是一个基于 JavaScript 的数据可视化库，它提供丰富的图表类型，如柱状图、折线图、饼图等，并支持在网页上动态渲染大型数据。ECharts 的优点包括易于使用、性能优秀、兼容多种浏览器，且具有良好的交互功能...
echarts-中国地图json文件
10-13
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上动态渲染地理地图。在ECharts中，使用中国地图JSON文件可以实现对中国各地区...
Axure 图表元件库基于ECharts库
07-21
**Axure图表元件库基于ECharts库** Axure是一款广泛使用的原型设计工具，它允许设计师快速创建交互式网站和应用程序的原型。ECharts是百度开源的一款JavaScript数据可视化库，提供了丰富的图表类型，如柱状图、折线...
echarts实现3D环装饼图带引导线效果
01-25
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库，它提供丰富的可视化图表类型，适用于各种数据可视化需求。在本项目中，我们将探讨如何使用ECharts实现一个3D环状饼图，并...
Echarts的使用（优化按需引入）
失眠时间的博客
05-16 5898
Echarts按需引入配置详情
echarts的使用
caimaomaocai的博客
07-10 8829
这两天学习了好多新知识，开心因为echarts是纯js的图标库，所以不依赖于jq,我们只需要到官网把源码下载下来。引入就可以使用打开echarts官网点击下载，来到如下图所示页面，点击源代码下载在html文件中引入echarts如下&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
echarts 基础图形使用
xin_yun_Jian的博客
10-27 443
1. 安装 npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div> 3. 引入 import * as echarts from "echarts"; 4. 柱状图 initBar() { var myCha...
echarts的引入和使用
热门推荐
北海之灵的博客
04-19 4万+
1.引入方式一，标签式单文件引入 直接引入echarts-all.js，使用起来比较简单 2.引入方式二，模块化单文件引入 引入echarts包 jsp或html文件引入echarts包下的echarts.js
数据可视化大屏模板及echarts图表案例集锦
资源摘要信息:"ECharts是一种使用JavaScript编写的开源可视化库，它能够帮助开发者制作各种图表和数据可视化大屏。本资源包含了15套精美的数据可视化大屏模板和18个ECharts图表案例，涵盖了数据监测、数据统计、数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值