Echarts插件的使用

最新推荐文章于 2024-01-04 13:36:15 发布
最新推荐文章于 2024-01-04 13:36:15 发布
阅读量484 收藏 1
点赞数
分类专栏： jQuery JS高级 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tooHar/article/details/117195610
版权

笔记目录

小概

学习内容：
第一部分复习css样式属性：边框背景图片border-image,，background-size，超出文本显示省略号
第二部分echarts的学习：基本使用，option配置项的学习，图的制作（饼图，线形图，条形图，环形图，迁徙图）、

一、border-image属性

边框背景图片

            /* 边框背景图片 */
            /* 1.设置边框背景图片来源 */
            border-image-source: url('./image/border2.jpg');
            /* 2.设置边框背景图片偏移量:用四个偏移量(上右下左)把图片裁剪成九宫格 */
            border-image-slice: 167 167 167 167;
            /* 3.设置边框背景图片的宽度:一般和盒子的宽度一致 */
            border-image-width: 20px;
            /* 4.设置中间图片的平铺样式:repeat重复 stretch拉伸 round铺满 */
            border-image-repeat: stretch;

            /* 复合属性可以连写 */
            border-image: url('./image/border2.jpg') 167 167 167 167/20px stretch;

应用：

 .panel {
            width: 300px;
            height: 150px;
            /* 设置边框背景图片的前提是盒子有边框的 */
            border: 20px solid red;
            border-width: 50px 38px 20px 126px;

            /* 内减盒子 */
            box-sizing: border-box;
            /* 父相 */
            position: relative;

            /* 边框背景图片 */
            /* 1. */
            border-image-source: url('./image/border.png');
            /* 2. */
            border-image-slice:50 38 20 126;
            /* 3. */
            border-image-width: 50px 38px 20px 126px;
            /* 4. */
            border-image-repeat: stretch;
        }
        .inner {
            /* 子绝 */
            position: absolute;
            top:-50px;
            right: -38px;
            bottom: -20px;
            left: -126px;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
    <!-- 外面的盒子专门用来做边框背景 -->
    <div class="panel">
        <!-- 里面的盒子专门用来放内容 -->
        <div class="inner">哈哈</div>
    </div>

2. background-size

希望背景图片占满盒子,那就要设置background-size */
contain 等比例缩放图片,有一边到了盒子的边界就停止缩放 */
cover 等比例缩放图片,必须要让图片占满整个才停止缩放 */

3. 超出文本显示省略号

单行：
white-space:nowrop 禁止换行
overflow：hidden 超出隐藏
text-overflow:ellipsis 文本溢出显示省略号

多行：
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
忘记建议百度，这个有可能会有兼容性问题

4. Echarts制图

4.1 基本使用

1.引入echarts文件
2.为图表准备一个有宽高的容器
3.根据这个有宽高的容器，调用echarts的init方法创建一个echarts的实例
4.调用echarts实例的setOtion方法----参数就option配置项

   <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

4.2 option配置项的学习

1.直接去看配置项手册（全面，但是多 难找）
2.直接去看示例 (容易看懂，但是没手册全）
下面列举几个比较常用的option配置项

           1.title 标题
            2.legend 图例组件
                type 图例的类型(plain普通图例 scroll滚动图例)
                data 图例的数据数组
            3.grid
                left/top/right/bottom 相当于盒子模型的padding
                width/height 设置组件的宽高
            4.xAxis 直角坐标系 grid 中的 x 轴
                show  是否显示 x 轴
                position x轴的位置,默认在下方('bottom'),值可以是 'top'/'bottom'
                data 数组,元素是对象  是x轴需要显示的数据
                    对象里有value和textStyle
                axisLine Object 坐标轴轴线
                    show 是否显示x轴线
                    lineStyle x轴线的样式
                        color  x轴线的颜色
                axisTick Object 坐标轴刻度相关设置
                    show 是否显示刻度线
                    lineStyle 刻度线的样式
                        color  刻度线的颜色
                axisLabel Object 坐标轴文本
                    show 是否显示x轴的文本
                    color x轴的文本颜色
                splitLine Object  坐标轴在 grid 区域中的分隔线
                    show 是否显示x轴分割线
                    lineStyle x轴分割线的样式
                        color  x轴分割线的颜色
                splitArea Object 坐标轴在 grid 区域中的分隔区域
                    show 是否显示
                    areaStyle 区域样式
                        color 颜色
            5.yAxis y轴
                min y轴最小刻度
                max y轴最大刻度
                minInterval 最小间隔
                maxInterval 最大间隔
            6.tooltip 提示框组件
                show 是否显示提示框
                trigger 触发类型
                    'item'  饼图
                    'axis'  柱状图/折线图
                    'none'  什么都不触发
                position 提示框浮层的位置
                formatter 提示框浮层内容格式器
            7.toolbox工具栏
                内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
            8.series 数组 系列图表
                type 图表的类型
                    line线形图  bar柱状图  pie饼图
                每一个图表里面都有一个itemStyle
            9.color 调色盘颜色列表
                如果不设置从默认的调色盘中获取颜色. 
            10.backgroundColor 背景色，默认无背景

4.3 图表的制作

1.饼图

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            // 背景色
            backgroundColor: '#2c343c',
            //标题
            // title: {
            //     text: 'Customized Pie',
            //     left: 'center',
            //     top: 20,
            //     textStyle: {
            //         color: '#ccc'
            //     }
            // },
            //鼠标移入的提示框
            tooltip: {
                trigger: 'item'
            },

            // visualMap: {
            //     show: true,
            //     min: 80,
            //     max: 600,
            //     inRange: {
            //         colorLightness: [0, 1]
            //     }
            // },
            series: [{
                //系列名称
                name: '点位分布统计',
                //饼图
                type: 'pie',
                //半径
                radius: [10, 90],
                //圆心的位置
                center: ['50%', '50%'],
                //数据
                data: [{
                        value: 110,
                        name: '云南'
                    },
                    {
                        value: 160,
                        name: '北京'
                    },
                    {
                        value: 180,
                        name: '山东'
                    },
                    {
                        value: 180,
                        name: '河北'
                    },
                    {
                        value: 160,
                        name: '江苏'
                    },
                    {
                        value: 200,
                        name: '浙江'
                    },
                    {
                        value: 280,
                        name: '四川'
                    },
                    {
                        value: 335,
                        name: '湖北'
                    }
                ],
                //不需要排序
                //.sort(function (a, b) { return a.value - b.value; }),
                //是否用圆心角和半径 区分数据的大小
                roseType: 'radius',
                //图例文字的颜色
                // label: {
                //     color: ''
                // },
                //引导线
                labelLine: {
                    //引导线的样式
                    lineStyle: {
                        //引导线的颜色
                        //color: 'rgba(0, 255, 0, 0.3)'
                    },
                    //是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，
                    //也可以设置为 0 到 1 的值，表示平滑程度
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    // color: '#c23531',
                    // shadowBlur: 200,
                    // shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }]
        };

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


2.柱状图

   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let item = {
            value: 1000,
            itemStyle: {
                color: '#254065', //颜色
                opacity: 0.6 //透明度
            }
        };

        let option = {
            //鼠标移入的提示框
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'none' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            //
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                //grid 区域是否包含坐标轴的刻度标签
                containLabel: true
            },
            //x轴
            xAxis: [{
                type: 'category',
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度线
                axisTick: {
                    show: false,
                    //刻度线和图例对齐
                    alignWithLabel: true
                },
                // 轴文本
                axisLabel: {
                    show: true, //显示如否
                    color: '#4c9bfd'
                },
                // 轴线颜色
                axisLine: {
                    show: true, //显示如否
                    lineStyle: {
                        color: '#01586b'
                    }
                }
            }],
            //y轴
            yAxis: [{
                show: true,
                type: 'value',
                // 刻度线
                axisTick: {
                    show: false,
                    alignWithLabel: true
                },
                // 轴文本
                axisLabel: {
                    show: true, //显示如否
                    color: '#4c9bfd'
                },
                // 轴线颜色
                axisLine: {
                    show: true, //显示如否
                    lineStyle: {
                        color: '#01586b'
                    }
                },
                //分割线
                splitLine: {
                    show: true, //显示如否
                    // 分割线样式
                    lineStyle: {
                        color: '#01586b' //颜色
                    }
                }
            }, {
                // 轴线颜色
                axisLine: {
                    show: true, //显示如否
                    lineStyle: {
                        color: '#01586b'
                    }
                },
            }],
            series: [{
                name: '用户统计',
                type: 'bar',
                //柱状条的宽度,自适应宽度的百分比
                barWidth: '60%',
                // 数据
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: '#00faf9'
                            },
                            {
                                offset: 1,
                                color: '#0064cf'
                            }
                        ]
                    )
                }
            }, ]
        };

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


3.线形图

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            //标题
            title: {
                text: '单位 万',
                textStyle: {
                    color: '#4996f5', //颜色
                    fontSize: 14
                },
                left: 30
            },
            // 鼠标移入的提示框
            tooltip: {
                // trigger: 'axis',
                // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                //     type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
                // }
            },
            // 图例组件
            legend: {
                data: ['最高额度', '最低额度'],
                right: 50,
                textStyle: {
                    color: '#4995f4'
                }
            },
            //工具栏
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none'
            //         },
            //         dataView: {readOnly: false},
            //         magicType: {type: ['line', 'bar']},
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            //X轴
            xAxis: {
                type: 'category',
                //坐标轴两边留白策略
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                //x轴刻度
                axisTick: {
                    show: false
                },
                //x轴文本
                axisLabel: {
                    color: '#438be5', //颜色
                    align: 'left' //文本对齐方式
                },
                //x轴轴线
                axisLine: {
                    lineStyle: {
                        color: '#012b48'
                    }
                }
            },
            //Y轴
            yAxis: {
                type: 'value',
                //y轴文本
                axisLabel: {
                    // formatter: '{value} °C'
                    color: '#438be5'
                },
                //y轴刻度
                axisTick: {
                    show: false
                },
                //y轴轴线
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#012b48'
                    }
                },
                //y轴分割线
                splitLine: {
                    lineStyle: {
                        color: '#012b48'
                    }
                }
            },
            series: [{
                    name: '最高额度',
                    type: 'line',
                    data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                    //线是否平滑
                    smooth: true,
                    //标记点的大小
                    symbolSize: 8,
                    //线和点都改变样式
                    itemStyle: {
                        color: '#00f2f1'
                    }
                    //线改变样式
                    // lineStyle:{
                    //     color:'red'
                    // },
                    //线包含的区域样式
                    // areaStyle:{
                    //     color:'red'
                    // }
                    //标记点
                    // markPoint: {
                    //     data: [
                    //         {type: 'max', name: '最大值'},
                    //         {type: 'min', name: '最小值'}
                    //     ]
                    // },
                    //标记线
                    // markLine: {
                    //     data: [
                    //         {type: 'average', name: '平均值'}
                    //     ]
                    // }
                },
                {
                    name: '最低额度',
                    type: 'line',
                    data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                    //线是否平滑
                    smooth: true,
                    //标记点的大小
                    symbolSize: 8,
                    //线和点都改变样式
                    itemStyle: {
                        color: '#dd3c36'
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


4.环形图

   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            // tooltip: {
            //     trigger: 'item'
            // },
            // legend: {
            //     top: '5%',
            //     left: 'center'
            // },
            series: [{
                startAngle: 180,
                name: '访问来源',
                type: 'pie',
                // 内外半径
                radius: ['50%', '70%'],
                //是否启用防止标签重叠策略
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{
                        value: 3,
                        name: '搜索引擎',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#0063c2'
                                    },
                                    {
                                        offset: 1,
                                        color: '#00c3de'
                                    }
                                ]
                            )
                        },
                    },
                    {
                        value: 1,
                        name: '直接访问',
                        itemStyle: {
                            color: '#d0274d'
                        }
                    },
                    {
                        value: 4,
                        name: '邮件营销',
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

其实就是环形图，把半的背景设置为transparent（透明色）

5.迁徙图(这个是网友用这个插件写的)
这个需要再引入./china.js文件，但是新版本好像没有这个map文件了
看上去就很牛逼

4.4 动态数据切换

如果需要动态数据切换，可以重新给option.series.data进行赋值，注意需要重新调用setOption方法进行渲染。

总结

学会echarts这个插件，网页绘图就很炫，option配置属性有很多属性，不要求都记住 但是一定要会找，要掌握找官方文档的技能。

Ordbiao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts插件介绍和使用
weixin_57765394的博客
11-17 2809
Echarts 1Echarts的介绍 ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯Javascript的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库ZRender，(Zrender是一个二维绘图引擎，它提供了Canvas，SVG，VML等多种渲染方式，Zrender也是Echarts的渲...
Echarts插件使用总结
hxxanyifree的博客
05-10 1422
做项目一直在使用echarts插件进行画图，怎么说呢，一直在用，但是下次再用的时候还是要翻看笔记或者官网。下面总结一下用echarts走的弯路。1.首先是当一个页面有两个echarts图时，怎么做到图形随着窗口大小而变化：chart1.resize(); chart2.resize();上面这么写是不行的，因为你会发现只会有一个图形变化。下面的才是正确的打开方式：window.onresize =
【Echarts】配置项归纳
Fulling的博客
06-30 4575
原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group。dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。
echart 属性以及用法详解；title、legend 、tooltip 、xAxis 、yAxis 、series；pie
柠檬酸
10-16 4758
关于echart属性及用法、title、legend 、tooltip 、xAxis 、yAxis 、series属性介绍；pie、line实例
echarts-图表插件
topuu的博客
07-04 1243
echarts
用echarts做知识图谱节点图形的文本标签太长解决办法
qq_46034741的博客
04-11 778
首先，ECharts 提供了相关的配置选项来解决这个问题。​表示最大显示长度，当节点的文本超出这个长度时，它将以省略号表示。​ 函数用于截断超出指定长度的字符串并添加省略号。​ 函数来对节点标签进行自定义。​ 函数对文本进行省略。​ 函数，自定义节点文本标签的显示方式。
ECharts插件
09-22
ECharts最新版本插件
ECharts插件介绍（图表库）
weixin_30371875的博客
05-21 215
　　ECharts是一个非常好用的插件，用于进行 树状图，折线图，饼图，地图等等，系列视图的绘制。（详情看官网） 　　了解： 　　　　AMD：模块化开发方式；　　 　　　　引入文件后：console.log(echarts)　　//得到一个echarts的对象 　　　　options：选项； 　　　　图表介绍： 　　　　　　柱状图（bar） 　　　　　　折线图（line） 　　　　...
Echarts插件使用
高振的博客
09-04 667
Echarts插件使用 1、插件引用      2、html代码 近七日马鞍山景点订单门票数概览 近七日马鞍山线路订单数概览 昨日销售总金额（元）
ECharts插件的基本使用
zy的博客
02-24 764
1. 使用 npm下载组件库 npm install echarts --save 引入组件库
echarts插件
06-09
echarts插件
echarts 图形化插件
12-18
用于前端开发 需要用到图形化界面，各种图形。只需要传入相应的json格式，图形化自动形成
echarts第三方插件js
09-28
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，是一种数据可视化图表。
JavaScript使用百度ECharts插件绘制饼图操作示例
12-14
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下： 百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据图表。 本文简述使用ECharts绘制饼图(Pie Chart)的过程，下图为使用ECharts绘制的饼图实例。 首先需要在页面中新建[removed]标签，引入符合AMD规范的加载器，如esl.js 关于AMD规范的详细介绍，可以参考阮一峰的博文：Javascript模块化编程（二）：AMD规范 <script src="http://s
echarts中使用天地图的插件示例
01-01
echarts中使用天地图的插件示例，...1.echarts-extension-tmap.js 在高度地图echarts插件的基础上修改 2.tmap.js 在百度地图echarts插件的基础上的修改 引入后使用方式和echats中使用百度地图及高德地图的方式一直。
echarts水球图插件2.0.6
最新发布
01-17
echarts水球图插件2.0.6
Echarts 树状图修改 以及 解决数据太多堆挤问题
weixin_41752213的博客
01-04 1205
echatrs树状图节点样式修改 数据太多堆挤 高度调整
Echarts插件
weixin_30616969的博客
08-04 103
<%@ page contentType="text/html;charset=UTF-8" language="java" %><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + r...
uniapp中使用echarts插件
05-10
要在uniapp中使用echarts插件，需要以下几个步骤： 1. 安装echarts插件 可以在uniapp插件市场中搜索echarts插件并进行安装，或者在项目根目录下使用npm安装echarts插件： ``` npm install echarts --save ``` 2. 在页面中引入echarts插件 可以在页面中直接引入echarts插件： ```html <script src="/static/echarts.min.js"></script> ``` 也可以在页面中使用uni.require引入： ```js const echarts = uni.require('/static/echarts.min.js') ``` 3. 在页面中使用echarts 在页面中定义一个canvas元素，然后在js中初始化echarts并绑定到canvas上： ```html <template> <view> <canvas id="mychart"></canvas> </view> </template> <script> export default { onReady() { const ctx = uni.createCanvasContext('mychart') const chart = echarts.init(ctx) // echarts配置项 const option = {...} // 设置图表配置项并渲染 chart.setOption(option) } } </script> ``` 以上就是在uniapp中使用echarts插件的基本流程。需要注意的是，echarts插件的使用方式和原生的使用方式基本一致，只是在uniapp中需要通过canvas元素来绑定echarts实例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值