ECharts2

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

饼状圆

type: 属性为"pie"

可以指定圆的半径

  • radius: 60：指定的

  •   radius: '50%'   如果radius是百分比，他是以width和height中较小的值为参照物

  • radius: [200, 300]  如果radius是一个数组时，第一个元素表示的是內圆的半径，第二个元素表示外圆的半径

一个简单的圆（指定半径和百分比）

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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 = {
            series: [{
                type: "pie",
                data: [{
                    value: 335,
                    name: "数量"
                }, {
                    value: 234,
                    name: "aaa"
                }, {
                    value: 1520,
                    name: "总访问"
                }],
                // 指定圆的半径
                // radius: 60
                // 如果radius是百分比，他是以width和height中较小的值为参照物
                radius: '50%'
                    // 如果radius是一个数组时，第一个元素表示的是內圆的半径，第二个元素表示外圆的半径
                    // radius: [200, 300]
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

 如果是数组效果

 如果value的值是0那么就要把圆隐藏

设置stillShowZeroSum的值为false

文字设置label: {show: false},

2.设置标题高亮显示

设置：emphasis属性

代码：

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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: "标题",
                left: "center",
                top: "center",
            },
            series: [{
                type: "pie",
                // 圆都是0的情况隐藏
                // stillShowZeroSum: false,
                // 文字隐藏

                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        color: "red",
                        fontSize: 18
                    },
                    // 线的样式
                    labelLine: {

                    }
                },
                data: [{
                    value: 200,
                    name: "数量"
                }, {
                    value: 300,
                    name: "aaa"
                }, {
                    value: 1500,
                    name: "总访问"
                }],
                // 指定圆的半径
                // radius: 60
                // 如果radius是百分比，他是以width和height中较小的值为参照物
                // radius: '50%'
                // 如果radius是一个数组时，第一个元素表示的是內圆的半径，第二个元素表示外圆的半径
                radius: [50, 100]
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

玫瑰图 

roseType: 'area'

代码：

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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 = {
            series: [{
                type: 'pie',
                data: [{
                    value: 40,
                    name: '玫瑰图 1'
                }, {
                    value: 38,
                    name: '玫瑰图 2'
                }, {
                    value: 32,
                    name: '玫瑰图 3'
                }, {
                    value: 30,
                    name: '玫瑰图 4'
                }, {
                    value: 28,
                    name: '玫瑰图 5'
                }],
                roseType: 'area'
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

散点状

 设置type 属性为scatter

  • itemStyle可以设置散点的样式
  • 设置大小symbolSize，内置的如：symbol: 'circle'
  • 可以设置不一样的大小：  symbolSize: function(val) {return val / 10 },// val就是data里面的数据

  • 引用图片：

  • 第一种：使用内置的

  • 第二种：使用图片：格式："image://url"

  • 第三种：使用path：格式："path://path路径"

使用图片：

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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 = {
            xAxis: {
                type: "category",
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            yAxis: {
                type: "value"
            },
            series: [{
                type: 'scatter',

                data: [220, 182, 191, 234, 290, 330, 310],
                // 颜色
                itemStyle: {
                    color: "red"
                },
                // 大小1
                // symbolSize: 20,
                // symbol: 'circle'
                // 可以设置不一样的大小
                symbolSize: function(val) {
                    // val就是data里面的数据
                    return val / 10
                },
                // 引用图片
                // 第一种：使用内置的
                // 第二种：使用图片：格式："image://url"
                // 第三种：使用path：格式："path://path路径"
                symbol: 'image://img/zc_03.jpg'
                    // symbol: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z"

            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

 使用path（代码把上面的path注释放开）

效果：

3.数据转换 

如果想要排序： 更改：type: "sort", order: "asc"

代码：

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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 = {
            dataset: [{
                // 这个 dataset 的 index 是 `0`。
                source: [
                    ['年份', '2011', '2012', '2013'],
                    ['蛋糕', 123, 32, 2011],
                    ['饼干', 231, 14, 2011],
                    ['咖啡', 235, 5, 2011],
                    ['面包', 341, 25, 2011],
                    ['饮料', 122, 29, 2011],
                    ['蛋糕', 143, 30, 2012],
                    ['饼干', 201, 19, 2012],
                    ['咖啡', 255, 7, 2012],
                    ['面包', 241, 27, 2012],
                    ['饮料', 102, 34, 2012],
                    ['蛋糕', 153, 28, 2013],
                    ['饼干', 181, 21, 2013],
                    ['咖啡', 395, 4, 2013],
                    ['面包', 281, 31, 2013],
                    ['饮料', 92, 39, 2013],
                    ['蛋糕', 223, 29, 2014],
                    ['饼干', 211, 17, 2014],
                    ['咖啡', 345, 3, 2014],
                    ['面包', 211, 35, 2014],
                    ['饮料', 72, 24, 2014]
                ]
            }, {
                transform: {
                    type: 'filter',
                    config: {
                        dimension: '2013',
                        value: "2011"
                    }
                }
            }, {
                transform: {
                    type: 'filter',

                    config: {
                        dimension: '2013',
                        value: 2012
                    }
                }
            }, {
                // 这个 dataset 的 index 是 `3`。
                transform: {
                    type: 'filter',
                    config: {
                        dimension: '2013',
                        value: 2013
                    }
                }
            }],
            series: [{
                type: 'pie',
                radius: 50,
                center: ['25%', '50%'],
                datasetIndex: 1
            }, {
                type: 'pie',
                radius: 50,
                center: ['50%', '50%'],
                datasetIndex: 2
            }, {
                type: 'pie',
                radius: 50,
                center: ['75%', '50%'],
                datasetIndex: 3
            }]
        };

        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
    </script>
</body>

</html>

效果：

 4.跳转

实现点击跳转首先要给他一个点击事件

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/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 = {
            legend: {
                show: true
            },
            xAxis: {
                type: 'category',
                data: ['羊毛衫', '雪绒衫', '衬衫', '裤子', '高跟鞋', '袜子', '半袖']
            },
            yAxis: {},
            series: [{
                name: "销量",
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
            }, {
                name: "总结",
                data: [100, 300, 100, 180, 30, 130, 120],
                type: 'bar',
            }]
        };
        //第四部
        myEcharts.setOption(option)
            // 实现响应式
        window.onresize = function() {
            myEcharts.resize()
        }
        myEcharts.on('click', function(params) {
            // console.log(params)
            // 点击跳转
            window.open('https://www.baidu.com/s?wd=' + params.name)

        })
    </script>
</body>

</html>

效果：

 

sh2001824
关注
echarts属性的设置（完整大全）
weixin_38169886的博客
08-08 1807
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...
echarts-2.2.0静态HTML版说明文档
01-08
echarts-2.2.0官方静态HTML版说明文档，内含丰富图形实例及应用属性说明，同时包含源码文件。
echarts南丁格尔图设置最小半径
qq_52685664的博客
11-08 1921
/ color: '#000', //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色。width: 1, // 线条的宽度。startAngle: -90, //起始角度。length2: 20, //第一条线。length: 10, //第二条线。放大数据再还原之前的值----->最大值的0.5倍。
Echarts 环形图配置 环形半径(radius) 修改文本位置(label) 南丁格尔图(roseType)
最新发布
生产队的驴
12-11 979
/第一个为内径 第二个为外径。
echarts一个柱状图两组数据_数据之美 · 屠夫的数据可视化三节课之三：可视化的思考...
weixin_42634811的博客
11-29 602
文：屠夫1868欢迎关注：基业长红转载需获本人授权，并注明作者和出处金钱永不眠，屠夫问候各位早安。一连三周的数据可视化系列在今天将迎来尾声，在此之前我们先回顾一下上周《可视化的使用》为大家介绍的「D·R·C·C·T」：Distribution · 分布：展现数据的分布情况，是洞察的基础Relationship · 关系：表达数据之间的关系，突出的是关联Comparison · 比较：对比数据的不同...
Echarts极地坐标图直径半径设置
weixin_34318956的博客
06-06 906
为什么80%的码农都做不了架构师？>>> ...
Echarts地图如何使用(v2版本)
weixin_68966058的博客
08-16 412
阿里云开放平台geoJson文件下载地址：DataV.GeoAtlas地理小工具系列 1.在项目中通过axios获取数据 2.地图的声明 3.地图的引用在地图进行注册声明后，可直接在echarts配置中使用series-map进行地图的绘制 以上便可以直接实现地图的简单绘制，更丰富的地图样式属性的设置请查询 Echarts文档5.geo组件的使用geo为地理坐标系组件，在一些场景需要使用，如地图上某特定坐标点的定位，地图飞线等，可以使用之前注册好的地图数据进行geo组件的声明 6.展示效果可
百度Echarts2.2.2文档
05-25
百度Echarts2.2.2文档，转为pdf格式了
基于Echarts2.X的地图数据可视化指南
热门推荐
夜郎King的博客
06-29 1万+
本文将基于Echarts2.2.7版本，重点讲解如何使用Html5和JavaScript进行Echarts地图开发，同时在地图上集成时间轴和数值展示，最后提供一个极简的集成实例，通过实例运行掌握实际开发，通过Echarts的地图组件来完成数据的地理可视化
echart2文档（简单明白）
蜗蜗牛在路上的博客
05-16 2591
文档入口（这个比echart3的文档看得明白）
echarts2.0完整离线学习文档
07-26
Echarts2.0完整学习文档，完整源码在内，图像化类表展示
解决Echarts2竖直datazoom滑动后显示数据不全的问题
10-15
主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts2D地图实现3D阴影效果 山东省.zip
12-24
echarts2D地图实现3D阴影效果，以山东省为例。附：最新版山东地图（济南、莱芜合并后）。由于该资源设计get请求，请将该资源放到服务器上运行。
reactjs框架 dva + echarts2的演示案例
09-25
react+echarts2的相关开发案例比较小，因此做了8个小demo作为案例提供参考，react+echarts3的，打算稍候也做一份相关案例
echarts2前台框架
06-17
echarts2前台框架,完全开源的图表生成前台控件。
Echarts3模拟迁徙类似Echarts2
10-20
echart3是采用lines加地图模拟迁徙。echarts2是采用map的markLine和markPoint来模拟迁徙的。echarts3模拟的是航空迁徙，比较单调。
Echarts2的使用——绘制中国地图
As的博客
04-17 3377
Echarts官网 尽管官网里已有基础教程，但刚入门时难免会遇到不少问题，比如说中文乱码、不会引用示例图等，为此在此打卡记录以下，希望也能帮广大新手绕过一些坑。 如何引用Echarts示例图 打开入门教程，复制图标效果上方一栏的代码 粘贴到记事本里，并保存为 .html文件 注意： 文件名以 “ .html ” 为后缀，保存类型改为 “ 所有文件(* . *) ” ，编码改为 “ UTF...
Echarts使用小结
CSDN_1999的博客
09-22 593
还是先来简单的了解一下Echart是什么吧？ ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数...
基于js+echarts实现数据可视化
奶茶控
10-22 1万+
本项目中使用的是echarts图表库，Echarts提供了常规的折线图、柱状图、散点图、饼图、k线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 一、效果展示图 二、目录结构 ...
echarts2 柱状图
11-25
以下是使用echarts2绘制柱状图的示例代码： ```javascript // 引入echarts var echarts = require('echarts'); // 初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 配置图表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值