程序员经验分享-hwhale

echarts使用心得

2023-05-16

前言

第一次参加工作，公司使用图表很频繁，我之前会highcharts，但是公司基本上都是使用的echarts，于是自己开始琢磨echarts，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。

插件的下载

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。
ECharts下载地址： http://echarts.baidu.com/
ZRender下载地址：http://ecomfe.github.io/zrender/index.html
下载之后解压各自的文件目录结构如下：
Echarts：
这里写图片描述
ZRender:
这里写图片描述

echarts结构图

这里写图片描述

在页面中的具体使用

MapChart

在head标签中添加对echarts的引用如下：

    <head runat="server">  
        <title></title>  
        <script src="echarts/echarts.js" type="text/javascript"></script>  
    </head>

在body标记中，form标记之外，添加一个div，用来做图表渲染的容器。如下：

    <body>  

    <div id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></div> 

    </body>

在div标记下，添加如下的js代码段，如下：

 <script type="text/javascript">

       //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。
这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。

        require.config({

            paths: {

                echarts:'./echarts/echarts',

                'echarts/chart/map':'./echarts/echarts-map'

            }

        });

      //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径

        require(

        [

            'echarts',

            'echarts/chart/map'

        ],

        function (ec) {

            varmyChart=ec.init(document.getElementById('main'));

            //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档

option= {

                title: {

                    text:'iphone销量',

                    subtext:'纯属虚构',

                    x:'center'

                },

                tooltip: {
                    trigger:'item'
                },
                legend: {
                    orient:'vertical',
                    x:'left',
                    data: ['iphone3','iphone4','iphone5']
                },

                dataRange: {
                    min:0,
                    max:2500,
                    text: ['高','低'],           // 文本默认为数值文本
                    calculable:true,
                    textStyle: {
                        color:'orange'
                    }

                },

                toolbox: {
                    show:rue,
                    orient:'vertical',
                    x:'right',
                    y:'center',
                    feature: {
                        mark:true,
                        dataView: { readOnly:false },
                        restore:true,
                        saveAsImage:true
                    }

                },

                series: [

        {

            name:'iphone3',

            type:'map',

            mapType:'china',

            selectedMode: 'single',

            itemStyle: {

                normal: { label: { show:true },color:'#ffd700' },// for legend

                emphasis: { label: { show:true} }

            },

            data: [

                { name:'北京',value:Math.round(Math.random() *1000) },

                { name:'天津',value:Math.round(Math.random() *1000) },

                { name:'上海',value:Math.round(Math.random() *1000) },

                { name:'重庆',value:Math.round(Math.random() *1000) },

                { name:'河北',value:Math.round(Math.random() *1000) },

                { name:'河南',value:Math.round(Math.random() *1000) },

                { name:'云南',value:Math.round(Math.random() *1000) },

                { name:'辽宁',value:Math.round(Math.random() *1000) },

                { name:'黑龙江',value:Math.round(Math.random() *1000) },

                { name:'湖南',value:Math.round(Math.random() *1000) },

                { name:'安徽',value:Math.round(Math.random() *1000) },

                { name:'山东',value:Math.round(Math.random() *1000) },

                { name:'新疆',value:Math.round(Math.random() *1000) },

                { name:'江-苏?',value:Math.round(Math.random() *1000) },

                { name:'浙江',value:Math.round(Math.random() *1000) },

                { name:'江西',value:Math.round(Math.random() *1000) },

                { name:'湖北',value:Math.round(Math.random() *1000) },

                { name:'广西',value:Math.round(Math.random() *1000) },

                { name:'甘肃',value:Math.round(Math.random() *1000) },

                { name:'山西',value:Math.round(Math.random() *1000) },

                { name:'内蒙古',value:Math.round(Math.random() *1000) },

                { name:'陕西',value:Math.round(Math.random() *1000) }

            ]

        },

        {

            name:'iphone4',

            type:'map',

            mapType:'china',

            selectedMode: 'single',

            itemStyle: {

                normal: { label: { show:true },color:'#ff8c00' },// for legend

                emphasis: { label: { show:true} }

            },

            data: [

                { name:'北京',value:Math.round(Math.random() *1000) },

                { name:'天津',value:Math.round(Math.random() *1000) },

                { name:'上海',value:Math.round(Math.random() *1000) },

                { name:'重庆',value:Math.round(Math.random() *1000) },

                { name:'河北',value:Math.round(Math.random() *1000) },

                { name:'安徽',value:Math.round(Math.random() *1000) },

                { name:'新疆',value:Math.round(Math.random() *1000) },

                { name:'浙江',value:Math.round(Math.random() *1000) },

                { name:'江西',value:Math.round(Math.random() *1000) },

                { name:'山西',value:Math.round(Math.random() *1000) },

                { name:'内蒙古',value:Math.round(Math.random() *1000) },

                { name:'吉林',value:Math.round(Math.random() *1000) }

            ]

        },

        {

            name:'iphone5',

            type:'map',

            mapType:'china',

            selectedMode: 'single',

            itemStyle: {

                normal: { label: { show:true },color:'#da70d6' },// for legend

                emphasis: { label: { show:true} }

            },

            data: [

                { name:'北京',value:Math.round(Math.random() *1000) },

                { name:'天津',value:Math.round(Math.random() *1000) },

                { name:'上海',value:Math.round(Math.random() *1000) },

                { name:'广东',value:Math.round(Math.random() *1000) },

                { name:'台湾',value:Math.round(Math.random() *1000) },

                { name:'香港',value:Math.round(Math.random() *1000) },

                { name:'澳门',value:Math.round(Math.random() *1000) }

            ]

        }
    ]
            };
              //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。
             //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选
    varecConfig= require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
                varselected=param.selected;
               varmapSeries=option.series[0];
                vardata= [];
                varlegendData= [];
                varname;
                for (varp=0,len=mapSeries.data.length; p<len; p++) {
                    name=mapSeries.data[p].name;
                    mapSeries.data[p].selected=selected[name];
                    if (selected[name]) {
                        alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作 

                    }
                }
            });                
            myChart.setOption(option);
        }
    );
    </script>

这里写图片描述

LineChart

除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例，其它的示例都是一样的。

<scripttype="text/javascript">
        require.config({
            paths: {
                echarts:'./echarts/echarts',
                'echarts/chart/bar':'./echarts/echarts',//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别

                'echarts/chart/line':'./echarts/echarts'
            }
        });
        require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line'
        ],

        function (ec) {

            varmyChart=ec.init(document.getElementById('main'));

            option= {

                tooltip: {

                    trigger:'axis'

                },

                legend: {

                    data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']

                },

                toolbox: {

                    show:true,

                    feature: {

                        mark:true,

                        dataView: { readOnly:false },

                        magicType: ['line','bar'],

                        restore:true,

                        saveAsImage:true

                    }

                },

                calculable:true,

                xAxis: [

        {

            type:'category',

            boundaryGap:false,

            data: ['周一','周二','周三','周四','周五','周六','周日']

        }

    ],

                yAxis: [

        {

            type:'value',

            splitArea: { show:true }

        }

    ],

                series: [

        {

            name:'邮件营销',

            type:'line',

            stack:'总量',

            data: [120,132,101,134,90,230,210]

        },

        {

            name:'联盟广告',

            type:'line',

            stack:'总量',

            data: [220,182,191,234,290,330,310]

        },

        {

            name:'视频广告',

            type:'line',

            stack:'总量',

            data: [150,232,201,154,190,330,410]

        },

        {

            name:'直接访问',

            type:'line',

            stack:'总量',

            data: [320,332,301,334,390,330,320]

        },

        {

            name:'搜索引擎',

            type:'line',

            stack:'总量',

            data: [820,932,901,934,1290,1330,1320]

        }

    ]

            };                   



            myChart.setOption(option);

        }

    );

    </script>


    <divid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></div>   

    <scripttype="text/javascript">

        require.config({

            paths: {

                echarts:'./echarts/echarts',

                'echarts/chart/bar':'./echarts/echarts',

                'echarts/chart/line':'./echarts/echarts'

            }

        });

        require(

        [

            'echarts',

            'echarts/chart/bar',

            'echarts/chart/line'

        ],

        function (ec) {

            varmyChart=ec.init(document.getElementById('main1'));

            option= {

                title: {

                    text:'未来一周气温变化',

                    subtext:'纯属虚构'
                },
                tooltip: {
                    trigger:'axis'
                },
                legend: {
                    data: ['最高气温','最低气温']
                },
                toolbox: {
                    show:true,
                    feature: {
                        mark:true,
                        dataView: { readOnly:false },
                        magicType: ['line','bar'],
                        restore:true,
                        saveAsImage:true
                    }
                },
                calculable:true,
                xAxis: [
        {

            type:'category',

            boundaryGap:false,

            data: ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
                yAxis: [
        {
            type:'value',
            axisLabel: {
                formatter:'{value} °?C'
            },
            splitArea: { show:true }

        }

    ],

                series: [

        {
            name:'最高气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor:'rgba(0,0,0,0.4)'
                    }
                }
            },
            data: [11,11,15,13,12,13,10]
        },
        {
            name:'最低气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor:'rgba(0,0,0,0.4)'
                    }
                }
            },
            data: [-2,1,2,5,3,2,0]
        }
    ]
            };                    
            myChart.setOption(option);
        }
    );
    </script>
    <divid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></div>   
    <scripttype="text/javascript">
        require.config({
            paths: {
                echarts:'./echarts/echarts',
                'echarts/chart/bar':'./echarts/echarts',
                'echarts/chart/line':'./echarts/echarts'
            }
        });
        require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line'

        ],
        function (ec) {
         varmyChart=ec.init(document.getElementById('main2'));
            option= {
                title: {
                    text:'某楼盘销售情况?',

                    subtext:'纯属虚构'
                },
                tooltip: {
                    trigger:'axis'

                },

                legend: {

                    data: ['意向','预购','成交']
                },
                toolbox: {
                    show:true,
                    feature: {
                        mark:true,
                        dataView: { readOnly:false },
                        magicType: ['line','bar'],
                        restore:true,
                        saveAsImage:true
                    }
                },
                calculable:true,
                xAxis: [
        {
            type:'category',

            boundaryGap:false,

            data: ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
                yAxis: [
        {
            type:'value'
        }
    ],
                series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: { normal: { areaStyle: { type:'default'}} },

            data: [10,12,21,54,260,830,710]
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: { normal: { areaStyle: { type:'default'}} },
            data: [30,182,434,791,390,30,10]
        },

        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: { normal: { areaStyle: { type:'default'}} },
            data: [1320,1132,601,234,120,90,20]
        }
    ]
            };                    
            myChart.setOption(option);
        }
    );
    </script>

完成以上操作之后效果图如下：
这里写图片描述
好了，今天就总结到这里了，希望能给大家带来一些帮助。这里主要是介绍地图控件的使用，因为其官方文档上关于路径的配置写的很不清楚，所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单，大家可以参考官方的文档。http://echarts.baidu.com/doc/doc.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

echarts

使用心得

echarts使用心得 的相关文章

  • PHPCrawler抓取酷狗精选集歌单

    一 PHPCrawler的介绍与安装 先了解一下什么是抓取 xff1f 抓取就是网络爬虫 xff0c 也就是人们常说的网络蜘蛛 xff08 spider xff09 是搜索引擎的一个重要组成部分 xff0c 按照一定的逻辑和算法抓取和下载互

随机推荐

  • 跨站脚本攻击XSS

    跨站脚本攻击 Cross Site Script为了区别于CSS简称为XSS 指的是恶意攻击者往Web页面里插入恶意html代码 xff0c 当用户浏览该页之时 xff0c 嵌入其中Web里面的html代码会被执行 xff0c 从而达到恶意

  • RedHat系统下安装yum

    一 前言 因为RedHat系统下的软件更新是RedHat公司的一项服务 xff0c 必须用钱买的rhel系统 xff0c 并且注册了RedHat的用户才能使用yum xff0c 要想免费使用yum xff0c 必须卸载原来的yum xff0

  • js实现图片放大镜效果

    一 HTML文件 lt DOCTYPE html PUBLIC 34 W3C DTD XHTML 1 0 Transitional EN 34 34 http www w3 org TR xhtml1 DTD xhtml1 transiti

  • PHP获取文件的修改时间、访问时间和inode 修改时间

    filemtime string filename 返回文件上次被修改的时间 xff0c 出错时返回 FALSE 时间以 Unix 时间戳的方式返回 xff0c 可用于 date 例如 xff1a a 61 filemtime 34 log

  • PHP设计模式之单例模式

    最近开始学习设计模式 xff0c 由于一开始没有系统的学习 xff0c 导致学的知识七零八落的 xff0c 得好好整理一下了 单例模式 xff08 职责模式 xff09 xff1a 简单的说 xff0c 一个对象 xff08 在学习设计模式

  • 创业资金来源

    创业资金的获得一般有以下几个途径 xff1a 一 自有资金 这个主要是自身的存款 xff0c 一般工作几年的人或多或少都有点存款 xff0c 这一部分的钱是自己创业的基本基金 二 股权融资 股权融资 xff0c 是指创业者或中小企业让出企业

  • Cannot modify header information解决办法

    如果在执行php程序时看到这条警告 Warning Cannot modify header information headers already sent by 可以尝试以下几种解决方法 Use exit statement 用exit

  • 中国距离VR市场成熟还要多久？

    VR xff08 Virtual Reality的缩写 xff0c 中文翻译 虚拟现实 xff09 概念早在80年代初就被提出来的 xff0c 其具体是指借助计算机及最新传感器技术创造的一种崭新的人机交互手段 中国VR产业仍在摸索阶段 亟缺

  • URL重写规则

    今天给大家详细讲解一下RewriteCond指令与RewriteRule 指令的格式 Rewirte主要的功能就是实现URL的跳转和隐藏真实地址 xff0c 基于Perl语言的正则表达式规范 帮助我们实现拟静态 xff0c 拟目录 xff0

  • 二值信号量与互斥锁区别

    互斥锁和二值信号量在使用上非常相似 xff0c 但是互斥锁解决了优先级翻转的问题 以军长 师长 团长为案例 xff0c 讲解mutex与signal区别 xff0c 以下是时序图 参考 xff1a https www cnblogs com

  • redisson-spring-boot-starter

    redisson spring boot starter spring boot 配置 spring redis redisson config classpath redisson beta yml 或者 spring redis red

  • URL中"#" "？" "&"号的作用

    10年9月 xff0c twitter改版 一个显著变化 xff0c 就是URL加入了 符号 比如 xff0c 改版前的用户主页网址为http twitter com username 改版后 xff0c 就变成了http twitter

  • STAR法则的简历应用

    STAR法则 即为Situation Task Action Result的缩写 xff0c 具体含义是 Situation 事情是在什么情况下发生 Task 你是如何明确你的任务的 Action 针对这样的情况分析 xff0c 你采用了什

  • BI商业智能

    关键字 xff1a 商务智能 xff0c 数据仓库 xff0c ETL BI xff08 Business Intelligence即商务智能 xff09 xff0c 百度百科用的解释是 xff0c 它是一套完整的解决方案 xff0c 用来

  • 遗传算法 一个模拟自然进化过程的启发式搜索算法

    关键字 xff1a 遗传算法 遗传算法 xff08 Genetic Algorithm xff09 是一种模拟自然界 自然选择 和 自然遗传 的启发式搜索算法 xff0c 通过模拟自然进化过程搜索最优解的方法 直到1989年 xff0c 实

  • PHP四大基本排序算法

    冒泡排序 思路分析 xff1a 在要排序的一组数中 xff0c 对当前还未排好的序列 xff0c 从前往后对相邻的两个数依次进行比较和调整 xff0c 让较大的数往下沉 xff0c 较小的往上冒 即 xff0c 每当两相邻的数比较后发现它们

  • 设置centos的YUM源为国内阿里云源

    阿里云Linux安装镜像源地址 xff1a http mirrors aliyun com http mirrors aliyun com repo CentOS系统更换软件安装源 第一步 xff1a 备份你的原镜像文件 xff0c 以免出

  • PHP八大设计模式

    PHP命名空间 可以更好地组织代码 xff0c 与Java中的包类似 Test1 php span class php span class hljs preprocessor lt php span span class hljs key

  • GitLab使用手册

    安装Git 安装环境 xff1a windows下载地址 xff1a git官方网站安装包 xff1a 64位安装过程 xff1a 傻瓜式安装至此安装完毕 生成私钥和公钥 ssh span class hljs attribute keyg

  • echarts使用心得

    前言 第一次参加工作 xff0c 公司使用图表很频繁 xff0c 我之前会highcharts xff0c 但是公司基本上都是使用的echarts xff0c 于是自己开始琢磨echarts xff0c 使用起来却颇费了一番工夫 所以就把使

热门标签