echartjs的使用方法

最新推荐文章于 2023-10-22 02:30:47 发布
最新推荐文章于 2023-10-22 02:30:47 发布
阅读量1.1k 收藏
点赞数
分类专栏： 技术性博客 工作日志 文章标签： echartjs

<div id="mainContent">
    <div class="forFlow">
        
        <div id="post_detail">
<!--done-->
<div id="topics">
    <div class="post">
        <h1 class="postTitle">
            <a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/st-leslie/p/5771241.html">前端数据可视化echarts.js使用指南</a>
        </h1>
        <div class="clear"></div>
        <div class="postBody">
            <div id="cnblogs_post_body" class="blogpost-body"><p style="background: #1F7B9B; color: white;"><span style="font-family: 楷体;"><span style="font-size: 24px; line-height: 36px;"><strong>一、开篇</strong></span></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">首先这里要感谢一下我的公司，因为公司需求上面的新颖(奇葩)的需求，让我有幸可以学习到一些好玩有趣的前端技术，前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面，目前市面上的数据可视化的框架琳琅满目，例如：D3.js、hightcharts.js、echarts.js…………。由于公司对这个项目的需求是1、开发时间短，所以也就限制了D3.js的使用。2、要尽量的减少开发的成本，所以也就不能使用hightcharts.js(hightcharts是一款个人免费，商业付费的框架)。所以在再三的比对之下最终选择了echarts.js</span></p>
<p>&nbsp;</p>
<p style="background: #1F7B9B; color: white;"><span style="font-family: 楷体;"><span style="font-size: 24px; line-height: 36px;"><strong>二、echarts.js的优势与总体情况</strong></span></span></p>
<p><span style="font-size: 15px; font-family: 楷体;">&nbsp;echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目，总体上来说有这样的一些优点</span></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">1、echarts.js容易使用</span></strong></p>
<p><span style="font-size: 15px; font-family: 楷体;">echarts.js的官方文档比较详细，而且官网中提供大量的使用示例供大家使用</span></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">2、echarts.js支持按需求打包</span></strong></p>
<p><span style="font-size: 15px; font-family: 楷体;">echarts.js官网提供了在线构建的工具，可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积</span></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">3、echarts.js开源</span></strong></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">4、支持中国地图功能</span></strong></p>
<p><span style="font-size: 15px; font-family: 楷体;">这个在其他的一些框架中是没有的，所以为这个功能点个赞</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 15px; font-family: 楷体;">但是echarts.js也存在着一些不好的地方，比如说：</span></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">1、echarts.js的体积较大</span></strong></p>
<p><span style="font-size: 15px; font-family: 楷体;">一个基础的echarts.js都要400K左右，相对于D3.js和hightcharts.js来说都是比较大的</span></p>
<p><strong><span style="font-size: 15px; font-family: 楷体;">2、echarts.js的可定制性差</span></strong></p>
<p><span style="font-size: 15px; font-family: 楷体;">说到echarts.js的定制性差，其实不止是包括echarts.js，hightcharts.js也是如此，因为这一类型的数据可视化框架主要是高度的进行分装，所以你在使用的时候只需要设置一下配置就可以了，但是如果是出现了要绘制配置中不支持的图表怎么办，那么你就只能放弃，尝试着使用其他的框架了</span></p>
<p><span style="font-size: 15px; font-family: 楷体;"><strong>总的来说:</strong>从大的方向上面来看，echarts.js还是值得去了解学习使用的，因为echarts.js得到了百度团队的重视，在git上面的更新也是比较的频繁，所以不会出现一些比较严重的bug之类的，最后这款框架一点就是框架的配置文件相当的详细，但是交互API文档虽然有说明，但是还是没有示例来举证，这个可能就是我认为的一个不足之处吧</span></p>
<p>&nbsp;</p>
<p style="background: #1F7B9B; color: white;"><span style="font-family: 楷体;"><span style="font-size: 24px; line-height: 36px;"><strong>三、echarts的应用</strong></span></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">&nbsp;首先要说明一点是，echarts这个框架的配置内容很是多，所以不要尝试着把这个框架中的方法都给记住，这是不太可能的事。但是由于这个框架的配置文件参数比较多，所以我们就需要来学习一下echarts是怎样来对其进行分类的</span></p>
<p><span style="font-family: 楷体; font-size: 15px;">1、首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详细的配置文件请戳<a href="http://echarts.baidu.com/option.html#title" target="_blank">这里</a>，这里我就来介绍一下关于配置文件的学习的经验之谈，比较常见的配置大致如下图：<br></span></p>
<p><span style="font-family: 楷体; font-size: 15px;"><img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160907235440363-264281746.png" alt=""></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">&nbsp;上面用红色方框标出来的就是echarts的基础配置，也是我认为的学习echarts一定要掌握的配置，其他的一些配置比如什么时间轴.visualMap组件之类，我认为这些异曲同工，所以这一部分也就是只有在当你的业务需要使用的时候才加入，也就是说，这一部分的知识我认为到时候现炒现卖就可以了（更正：<span style="color: #ff0000;">图标悬停的提示内容应该更正为鼠标悬停的提示内容</span>），下面我就来讲解一下echarts.js的使用，首先我在官网中下载默认的精简版，下载地址如下：http://echarts.baidu.com/builder.html，直接下载即可（建议在开发期间使用源码版，方便调试）</span></p>
<p><strong><span style="font-family: 楷体; font-size: 16px;">3.1 echarts.js入门基础小项目1</span></strong></p>
<p><span style="font-family: 楷体; font-size: 15px;">HTML和JavaScript代码：</span></p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>echarts.js案例一<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">='echarts.js'</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="chart"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:400px;height:400px;"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span>
    <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 初始化图表标签</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> myChart </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> echarts.init(document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">chart</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">));
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> options</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">{
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">定义一个标题</span>
<span style="background-color: #f5f5f5; color: #000000;">        title:{
            text:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">测试成绩</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
        },
        legend:{
            data:[</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">销量</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">]
        },
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">X轴设置</span>
<span style="background-color: #f5f5f5; color: #000000;">        xAxis:{
            data:[</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">60分</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">70分</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">80分</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">90分</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">100分</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">]
        },
        yAxis:{
        },
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">name=legend.data的时候才能显示图例</span>
<span style="background-color: #f5f5f5; color: #000000;">        series:[{
            name:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">销量</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
            type:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bar</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
            data:[</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">12</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">32</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">45</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">21</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">]
        }]

    };
    myChart.setOption(options);
</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p><span style="font-family: 楷体; font-size: 15px;">&nbsp;运行效果如下图，如果需要在线观看的请戳<a href="http://runjs.cn/detail/1xeiwncf" target="_blank">这里</a></span></p>
<p>&nbsp;<img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160908012305879-2018327405.png" alt=""></p>
<p><span style="font-family: 楷体; font-size: 15px;">&nbsp;注意事项：这里案例是最基础，但是里面还是有一个知识点来的，就是在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数，如果是不想设置的话也要初始化可以将其设置为空JSON就可以了，要不然会出项报错，同时要保证在echarts.init之前的对象是有宽高的，要不然也会出现错误</span></p>
<p><strong><span style="font-family: 楷体; font-size: 16px;">3.2 echarts.js多系列综合使用DEMO</span></strong></p>
<p><span style="font-family: 楷体; font-size: 15px;">在讲解这个案例之前，首先我们来假设一个命题，假设要统计一个商店一周的购买金额和一周的销售金额，其中的购买金额用柱状图表示，销售金额用折线图表示，然后还要标出一周中最大值和最小值，同时还要求出销售和购买的平均数，购买金额分别是[200,312,431,241,175,275,369]，销售金额[321,432,543,376,286,298,400]</span></p>
<p><span style="font-family: 楷体; font-size: 15px;">这个问题其实也不是很难，想一想，其实也就是一个把多个 系列图表应用到一个画布上面的过程，为了简短文章的篇幅，所以把不贴出全部的代码，仅贴出主要的其中关键的代码，代码如下：</span></p>
<p>&nbsp;</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #000000;">            series:[{
                name:</span>'购买金额'<span style="color: #000000;">,
                type:</span>'bar'<span style="color: #000000;">,
                data:[</span>200,312,431,241,175,275,369<span style="color: #000000;">],
                markPoint: {
                    data: [
                        {type: </span>'max', name: '最大值'<span style="color: #000000;">},
                        {type: </span>'min', name: '最小值'<span style="color: #000000;">}
                    ]
                },
                markLine:{
                    data:[
                        {type:</span>'average',name:'平均值'<span style="color: #000000;">,itemStyle:{
                            normal:{
                                color:</span>'green'<span style="color: #000000;">
                            }
                        }}
                    ]
                }
            },{
                name:</span>'销售金额'<span style="color: #000000;">,
                type:</span>'line'<span style="color: #000000;">,
                data:[</span>321,432,543,376,286,298,400<span style="color: #000000;">],
                markPoint: {
                    data: [
                        {type: </span>'max', name: '最大值'<span style="color: #000000;">},
                        {type: </span>'min', name: '最小值'<span style="color: #000000;">}
                    ]
                },
                markLine:{
                    data:[
                        {type:</span>'average',name:'平均值'<span style="color: #000000;">,itemStyle:{
                            normal:{
                                color:</span>'blue'<span style="color: #000000;">
                            }
                        }}
                    ]
                }
            }]</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p>&nbsp;<span style="font-family: 楷体; font-size: 15px;">实现效果：</span></p>
<p><span style="font-family: 楷体; font-size: 15px;"><img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160911183854127-115268624.png" alt=""></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">如需看完整的代码请戳<a href="http://runjs.cn/detail/9wiipqv7" target="_blank">这里</a>，自行fork下来</span></p>
<p><strong><span style="font-family: 楷体; font-size: 16px;">3.3 echarts.js响应式实现</span></strong></p>
<p><span style="font-family: 楷体; font-size: 15px;">echarts响应式在echarts官网上面的介绍比较详细，这里原理跟CSS3的媒体查询有点类似，但是echarts.js的响应除了支持媒体查询的在不同情况下面的相应还支持，根据长宽比来相应的方法，但是在官方文档中还是有一点缺陷的，比如：一个是案例中的响应式没有涉及到处理series之外的响应，另外一个是按照DEMO中去做，会发现每次都要刷新页面才能出现响应的结果，所以下面我将写一个简单的案例来解决这些问题，数据样式与上面的例子一样</span></p>
<p><span style="font-family: 楷体; font-size: 15px;">这里就把所有的JS代码贴出来：</span></p>
<p>&nbsp;</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #0000ff;">var</span> echart=echarts.init(document.getElementById('main1'<span style="color: #000000;">));
        </span><span style="color: #0000ff;">var</span> option=<span style="color: #000000;">{
            baseOption:{
                    title:{
                    text:</span>'模拟商店一周销售情况'<span style="color: #000000;">,
                    subtext:</span>'虚拟数据'<span style="color: #000000;">
                },
                legend:{
                    data:[</span>'购买金额','销售金额'<span style="color: #000000;">]
                },
                xAxis:{
                    data:[</span>'周一','周二','周三','周四','周五','周六','周日'<span style="color: #000000;">]
                },
                yAxis:{

                },
                tooltip:{
                    show:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
                    formatter:</span>'系列名:{a}&lt;br /&gt;类目:{b}&lt;br /&gt;数值:{c}'<span style="color: #000000;">
                },
                series:[{
                    name:</span>'购买金额'<span style="color: #000000;">,
                    type:</span>'bar'<span style="color: #000000;">,
                    data:[</span>200,312,431,241,175,275,369<span style="color: #000000;">],
                    markPoint: {
                        data: [
                            {type: </span>'max', name: '最大值'<span style="color: #000000;">},
                            {type: </span>'min', name: '最小值'<span style="color: #000000;">}
                        ]
                    },
                    markLine:{
                        data:[
                            {type:</span>'average',name:'平均值'<span style="color: #000000;">,itemStyle:{
                                normal:{
                                    color:</span>'green'<span style="color: #000000;">
                                }
                            }}
                        ]
                    }
                },{
                    name:</span>'销售金额'<span style="color: #000000;">,
                    type:</span>'line'<span style="color: #000000;">,
                    data:[</span>321,432,543,376,286,298,400<span style="color: #000000;">],
                    markPoint: {
                        data: [
                            {type: </span>'max', name: '最大值'<span style="color: #000000;">},
                            {type: </span>'min', name: '最小值'<span style="color: #000000;">}
                        ]
                    },
                    markLine:{
                        data:[
                            {type:</span>'average',name:'平均值'<span style="color: #000000;">,itemStyle:{
                                normal:{
                                    color:</span>'blue'<span style="color: #000000;">
                                }
                            }}
                        ]
                    }
                }]
            },
            media:[
                {
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">小与1000像素时候响应</span>
<span style="color: #000000;">                    query:{
                        maxWidth:</span>1000<span style="color: #000000;">
                    },
                    option:{
                        title:{
                            show:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
                            text:</span>'测试一下'<span style="color: #000000;">
                        }
                    }
                }
            ]
        };
        </span><span style="color: #008000;">//</span><span style="color: #008000;">每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况</span>
        window.onresize =<span style="color: #000000;"> echart.resize;
        echart.setOption(option);</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" οnclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p><span style="font-family: 楷体; font-size: 15px;">效果展示：原本是想要展示GIF的，但是录制的时候卡顿太严重所以也就只能发一下在无刷新的时候对比图片</span></p>
<p><span style="font-family: 楷体; font-size: 15px;"><img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160911221003644-1246511387.png" alt="" width="664" height="303"><img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160911221032584-1631230779.png" alt="" width="628" height="307"></span></p>
<p><strong><span style="font-family: 楷体; font-size: 16px;">3.4 echarts的API交互</span></strong></p>
<p><span style="font-family: 楷体; font-size: 15px;">首先我们来理清官方文档中的API的分类，大致的API可以分成这样的四类</span></p>
<p><span style="font-family: 楷体; font-size: 15px;"><img src="https://images2015.cnblogs.com/blog/728493/201609/728493-20160911222251042-1753971938.png" alt=""></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">这里我们就来解释一下echarts对象里面主要是包括一些销毁对象(dispose)，注册地图(registerMap)，初始化对象(echarts.init),关联对象(connect)，属于全局属性的设置，echartsInstance这个是包含echarts图中的某些属性的获取或者设置，获取宽高(getWidth、getHeight),获取配置(getOption)，设置配置(setOption)等操作action和events这两个操作在上图中已经很明白了，所以就不多做解释，具体的使用方法要与业务进行挂钩才有意义，所以在这里就不提供DEMO了，我相信大家看一下文档都能够看懂个究竟。</span></p>
<p>&nbsp;</p>
<p style="background: #1F7B9B; color: white;"><span style="font-family: 楷体;"><span style="font-size: 24px; line-height: 36px;"><strong>四、echarts常见问题解决</strong></span></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">&nbsp;1、当X轴上面要渲染的数据太多的时候就会出现只渲染出来一部分，但是图表中的数据显示(比如说柱状图中的每个柱子)又会自动的进行宽度的缩放，所以会导致X轴与图中的信息不相匹配的问题，解决的方</span><span style="font-size: 15px; font-family: 楷体;">法是在X轴设置axisLabel :{&nbsp;interval:0&nbsp;}这个属性问题就可以解决了，Y轴的使用方法相同<br></span></p>
<p><span style="font-family: 楷体; font-size: 15px;">2、为了使echart图表随着浏览器的大小发生响应式变化，所以需要在设置配置之前添加&nbsp;window.onresize = echart.resize; &nbsp;具体参照3.3 示例</span></p>
<p><span style="font-family: 楷体; font-size: 15px; color: #ff0000;">内容持续更新中，敬请期待</span></p>
<p>&nbsp;</p>
<p style="background: #1F7B9B; color: white;"><span style="font-family: 楷体;"><span style="font-size: 24px; line-height: 36px;"><strong>五、总结</strong></span></span></p>
<p>&nbsp;<span style="font-family: 楷体; font-size: 15px;">虽然echarts在同类型的数据可视化框架中还算是比较的简单易用的，但是在入手的时候可能也会有一些比较麻烦的地方困扰着你，比如文档这么多我怎么看，实例已经比较齐全了我还需要看API文档吗，这些问题我想在这里统一的说一下，其实echarts的学习无外乎就是先了解一下框架大致上的分类，然后是在将全部的API阅读以便，使对框架有一个全局的认识，然后在通过实践去深入学习，示例只不过是这一步的一个辅助而已，只有扎扎实实的通过学习API一步一个脚印去了解学习，才能做到在使用的时候心中有底。以上的文章是博主在学习和项目中使用echarts的一些体会，希望对大家有帮助</span></p>
<p>&nbsp;</p></div><div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">分类: <a href="https://www.cnblogs.com/st-leslie/category/833440.html" target="_blank">流行前端技术</a>,<a href="https://www.cnblogs.com/st-leslie/category/814010.html" target="_blank">项目经验</a></div>
<div id="EntryTag">标签: <a href="https://www.cnblogs.com/st-leslie/tag/echarts/">echarts</a>, <a href="https://www.cnblogs.com/st-leslie/tag/%E5%89%8D%E7%AB%AF/">前端</a>, <a href="https://www.cnblogs.com/st-leslie/tag/HTML5/">HTML5</a>, <a href="https://www.cnblogs.com/st-leslie/tag/%E6%95%99%E7%A8%8B/">教程</a>, <a href="https://www.cnblogs.com/st-leslie/tag/JavaScript/">JavaScript</a></div>
<div id="blog_post_info"><div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" οnclick="DiggIt(5771241,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
            <a id="green_channel_follow" οnclick="follow('cb726389-5bc5-e411-b908-9dcfd8948a71');" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" οnclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" οnclick="ShareToTsina()"><img src="//common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" οnclick="shareOnWechat()"><img src="//common.cnblogs.com/images/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/st-leslie/" target="_blank"><img src="//pic.cnblogs.com/face/728493/20161121220121.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/st-leslie/">谢灿勇</a><br>
            <a href="https://home.cnblogs.com/u/st-leslie/followees">关注 - 113</a><br>
            <a href="https://home.cnblogs.com/u/st-leslie/followers">粉丝 - 516</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" οnclick="follow('cb726389-5bc5-e411-b908-9dcfd8948a71');return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" οnclick="votePost(5771241,'Digg')">
        <span class="diggnum" id="digg_count">25</span>
    </div>
    <div class="buryit" οnclick="votePost(5771241,'Bury')">
        <span class="burynum" id="bury_count">1</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>
<script type="text/javascript">
    currentDiggType = 0;
</script></div>
<div class="clear"></div>
<div id="post_next_prev"><a href="https://www.cnblogs.com/st-leslie/p/5768524.html" class="p_n_p_prefix">« </a> 上一篇：<a href="https://www.cnblogs.com/st-leslie/p/5768524.html" title="发布于2016-08-14 15:06">CSS3系列之3D制作</a><br><a href="https://www.cnblogs.com/st-leslie/p/5791714.html" class="p_n_p_prefix">» </a> 下一篇：<a href="https://www.cnblogs.com/st-leslie/p/5791714.html" title="发布于2016-09-17 17:37">CSS3-3D制作案例分析实战</a><br></div>
</div>


        </div>
        <div class="postDesc">posted @ <span id="post-date">2016-09-12 01:24</span> <a href="https://www.cnblogs.com/st-leslie/">谢灿勇</a> 阅读(<span id="post_view_count">119718</span>) 评论(<span id="post_comment_count">16</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=5771241" rel="nofollow">编辑</a> <a href="#" οnclick="AddToWz(5771241);return false;">收藏</a></div>
    </div>
    <script type="text/javascript">var allowComments=true,cb_blogId=239191,cb_entryId=5771241,cb_blogApp=currentBlogApp,cb_blogUserGuid='cb726389-5bc5-e411-b908-9dcfd8948a71',cb_entryCreatedDate='2016/9/12 1:24:00';loadViewCount(cb_entryId);var cb_postType=1;var isMarkdown=false;</script>
    
</div><!--end: topics 文章、评论容器-->
</div><a name="!comments"></a><div id="blog-comments-placeholder"><div id="comments_pager_top"></div>
<!--done-->
<div class="feedback_area_title">评论列表</div>
<div class="feedbackNoItems"></div>
    

        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3508292" class="layer">#1楼</a><a name="3508292" id="comment_anchor_3508292"></a>  <span class="comment_date">2016-09-12 08:57</span> <a id="a_comment_author_3508292" href="https://www.cnblogs.com/youxia/" target="_blank">京山游侠</a> <a href="http://msg.cnblogs.com/send/%E4%BA%AC%E5%B1%B1%E6%B8%B8%E4%BE%A0" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3508292" class="blog_comment_body">mark后看。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3508292,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3508292,'Bury',this)">反对(0)</a></div><span id="comment_3508292_avatar" style="display:none;">http://pic.cnblogs.com/face/16576/20160930215813.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3508396" class="layer">#2楼</a><a name="3508396" id="comment_anchor_3508396"></a>  <span class="comment_date">2016-09-12 10:06</span> <a id="a_comment_author_3508396" href="https://www.cnblogs.com/coco1s/" target="_blank">ChokCoco</a> <a href="http://msg.cnblogs.com/send/ChokCoco" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3508396" class="blog_comment_body">echarts 算是简单易用，需要高度定制化更多功能建议使用 D3.js</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3508396,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3508396,'Bury',this)">反对(0)</a></div><span id="comment_3508396_avatar" style="display:none;">http://pic.cnblogs.com/face/608782/20160411131806.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3509226" class="layer">#3楼</a><a name="3509226" id="comment_anchor_3509226"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2016-09-12 23:41</span> <a id="a_comment_author_3509226" href="https://www.cnblogs.com/st-leslie/" target="_blank">谢灿勇</a> <a href="http://msg.cnblogs.com/send/%E8%B0%A2%E7%81%BF%E5%8B%87" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3509226" class="blog_comment_body"><a href="#3508396" title="查看所回复的评论" οnclick="commentManager.renderComments(0,50,3508396);">@</a>
ChokCoco<br>大神一席话，胜读十年书</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3509226,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3509226,'Bury',this)">反对(0)</a></div><span id="comment_3509226_avatar" style="display:none;">http://pic.cnblogs.com/face/728493/20161121220121.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3509230" class="layer">#4楼</a><a name="3509230" id="comment_anchor_3509230"></a>  <span class="comment_date">2016-09-12 23:51</span> <a id="a_comment_author_3509230" href="https://www.cnblogs.com/coco1s/" target="_blank">ChokCoco</a> <a href="http://msg.cnblogs.com/send/ChokCoco" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3509230" class="blog_comment_body"><a href="#3509226" title="查看所回复的评论" οnclick="commentManager.renderComments(0,50,3509226);">@</a>
谢灿勇<br>我哪是大神了，不敢当不敢当。<br>刚好用过 d3.js 和 听身边的说起过 echarts.js。d3 强大可定制化高需要SVG基础和入门比较蛋疼，echarts.js 应该是胜在简单易上手。<br>不过毕竟 d3 在 github 上有 5w 多 star ，专门用于可视化数据处理，有时间的建议可以去研究研究，想必用 D3 做出来的东西质量更高！</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3509230,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3509230,'Bury',this)">反对(0)</a></div><span id="comment_3509230_avatar" style="display:none;">http://pic.cnblogs.com/face/608782/20160411131806.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3519041" class="layer">#5楼</a><a name="3519041" id="comment_anchor_3519041"></a>  <span class="comment_date">2016-09-25 14:19</span> <a id="a_comment_author_3519041" href="http://home.cnblogs.com/u/966194/" target="_blank">1234567890study</a> <a href="http://msg.cnblogs.com/send/1234567890study" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3519041" class="blog_comment_body">不错，学习一下</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3519041,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3519041,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3559005" class="layer">#6楼</a><a name="3559005" id="comment_anchor_3559005"></a>  <span class="comment_date">2016-11-18 08:36</span> <a id="a_comment_author_3559005" href="http://home.cnblogs.com/u/1048123/" target="_blank">张淑娟</a> <a href="http://msg.cnblogs.com/send/%E5%BC%A0%E6%B7%91%E5%A8%9F" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3559005" class="blog_comment_body">你好，多个图表同时设置响应式怎么设置呢？window.onresize 只能绑定一次</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3559005,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3559005,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3618915" class="layer">#7楼</a><a name="3618915" id="comment_anchor_3618915"></a>  <span class="comment_date">2017-02-15 11:15</span> <a id="a_comment_author_3618915" href="https://www.cnblogs.com/straybirds/" target="_blank">假程序猿</a> <a href="http://msg.cnblogs.com/send/%E5%81%87%E7%A8%8B%E5%BA%8F%E7%8C%BF" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3618915" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3618915,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3618915,'Bury',this)">反对(0)</a></div><span id="comment_3618915_avatar" style="display:none;">http://pic.cnblogs.com/face/874126/20170222145207.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3699484" class="layer">#8楼</a><a name="3699484" id="comment_anchor_3699484"></a>  <span class="comment_date">2017-05-24 10:30</span> <a id="a_comment_author_3699484" href="https://www.cnblogs.com/wanghuijie/" target="_blank">Cousoulis</a> <a href="http://msg.cnblogs.com/send/Cousoulis" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3699484" class="blog_comment_body">学习了 , 谢谢楼主</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3699484,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3699484,'Bury',this)">反对(0)</a></div><span id="comment_3699484_avatar" style="display:none;">http://pic.cnblogs.com/face/1166714/20170703120132.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3775732" class="layer">#9楼</a><a name="3775732" id="comment_anchor_3775732"></a>  <span class="comment_date">2017-09-05 16:41</span> <a id="a_comment_author_3775732" href="http://home.cnblogs.com/u/1220891/" target="_blank">遥远的大海</a> <a href="http://msg.cnblogs.com/send/%E9%81%A5%E8%BF%9C%E7%9A%84%E5%A4%A7%E6%B5%B7" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3775732" class="blog_comment_body">非常不错！支持一个<br><a href="http://t.cn/RKSsoCW" target="_blank">http://t.cn/RKSsoCW</a></div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3775732,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3775732,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3790181" class="layer">#10楼</a><a name="3790181" id="comment_anchor_3790181"></a>  <span class="comment_date">2017-09-19 21:56</span> <a id="a_comment_author_3790181" href="http://home.cnblogs.com/u/1242946/" target="_blank">隔壁屋老沈</a> <a href="http://msg.cnblogs.com/send/%E9%9A%94%E5%A3%81%E5%B1%8B%E8%80%81%E6%B2%88" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3790181" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3790181,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3790181,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3822494" class="layer">#11楼</a><a name="3822494" id="comment_anchor_3822494"></a>  <span class="comment_date">2017-10-26 17:18</span> <a id="a_comment_author_3822494" href="https://www.cnblogs.com/renguiyouzhi/" target="_blank">死磕战队</a> <a href="http://msg.cnblogs.com/send/%E6%AD%BB%E7%A3%95%E6%88%98%E9%98%9F" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3822494" class="blog_comment_body">请问一下博主，你在用echarts的时候遇到过（Canval:an attempt to strokestylr or fillstyle to a value that is neither a string ,a CanvasGradient, or a CanvasPanttern was ignored）这种问题吗？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3822494,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3822494,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3822495" class="layer">#12楼</a><a name="3822495" id="comment_anchor_3822495"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-10-26 17:19</span> <a id="a_comment_author_3822495" href="https://www.cnblogs.com/st-leslie/" target="_blank">谢灿勇</a> <a href="http://msg.cnblogs.com/send/%E8%B0%A2%E7%81%BF%E5%8B%87" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3822495" class="blog_comment_body"><a href="#3822494" title="查看所回复的评论" οnclick="commentManager.renderComments(0,50,3822494);">@</a>
人贵有志<br>还真没遇过，估计这个问题你要到github或者stackoverflow上面去寻找答案了</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3822495,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3822495,'Bury',this)">反对(0)</a></div><span id="comment_3822495_avatar" style="display:none;">http://pic.cnblogs.com/face/728493/20161121220121.png</span>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3922627" class="layer">#13楼</a><a name="3922627" id="comment_anchor_3922627"></a>  <span class="comment_date">2018-03-14 14:00</span> <a id="a_comment_author_3922627" href="http://home.cnblogs.com/u/1074321/" target="_blank">永恒1</a> <a href="http://msg.cnblogs.com/send/%E6%B0%B8%E6%81%921" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3922627" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3922627,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3922627,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#3966997" class="layer">#14楼</a><a name="3966997" id="comment_anchor_3966997"></a>  <span class="comment_date">2018-05-04 10:42</span> <a id="a_comment_author_3966997" href="http://home.cnblogs.com/u/830107/" target="_blank">MVC203214161</a> <a href="http://msg.cnblogs.com/send/MVC203214161" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_3966997" class="blog_comment_body">我有个问题，当整个折线图由于Y轴的数字太大，想把整个折线图右移，怎么设置</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(3966997,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(3966997,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#4088657" class="layer">#15楼</a><a name="4088657" id="comment_anchor_4088657"></a>  <span class="comment_date">2018-10-13 22:33</span> <a id="a_comment_author_4088657" href="https://www.cnblogs.com/lxxgg1107/" target="_blank">lxxgg1107</a> <a href="http://msg.cnblogs.com/send/lxxgg1107" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_4088657" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(4088657,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(4088657,'Bury',this)">反对(0)</a></div>
            </div>
        </div>
    
        <div class="feedbackItem">
            <div class="feedbackListSubtitle">
                <div class="feedbackManage">
                    &nbsp;&nbsp;<span class="comment_actions"></span>
                </div>
                <a href="#4147813" class="layer">#16楼</a><a name="4147813" id="comment_anchor_4147813"></a><span id="comment-maxId" style="display:none;">4147813</span><span id="comment-maxDate" style="display:none;">2018/12/25 14:29:41</span>  <span class="comment_date">2018-12-25 14:29</span> <a id="a_comment_author_4147813" href="https://www.cnblogs.com/yan0802/" target="_blank">春至燕归来</a> <a href="http://msg.cnblogs.com/send/%E6%98%A5%E8%87%B3%E7%87%95%E5%BD%92%E6%9D%A5" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
            </div>
            <div class="feedbackCon">
                <div id="comment_body_4147813" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" οnclick="return voteComment(4147813,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" οnclick="return voteComment(4147813,'Bury',this)">反对(0)</a></div><span id="comment_4147813_avatar" style="display:none;">http://pic.cnblogs.com/face/970633/20160603111107.png</span>
            </div>
        </div>
    <div id="comments_pager_bottom"></div></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" οnclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" οnclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
<div id="comment_form_container"><div class="login_tips">注册用户登录后才能发表评论，请 <a rel="nofollow" href="javascript:void(0);" class="underline" οnclick="return login('commentform');">登录</a> 或 <a rel="nofollow" href="javascript:void(0);" class="underline" οnclick="return register();">注册</a>，<a href="http://www.cnblogs.com">访问</a>网站首页。</div></div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="ad_t2"><a href="http://www.ucancode.com/index.htm" target="_blank" οnclick="ga('send', 'event', 'Link', 'click', 'T2-工控')">【推荐】超50万C++/C#源码: 大型实时仿真组态图形源码</a><br><a href="https://www.grapecity.com.cn/developer/spreadjs?utm_source=cnblogs&amp;utm_medium=blogpage&amp;utm_term=bottom&amp;utm_content=SpreadJS&amp;utm_campaign=community" target="_blank" οnclick="ga('send', 'event', 'Link', 'click', 'T2-SpreadJS')">【前端】SpreadJS表格控件，可嵌入系统开发的在线Excel</a><br><a href="https://ke.qq.com/adActivity.html?name=xiangxueketang2" target="_blank" οnclick="ga('send', 'event', 'Link', 'click', 'T2-享学')">【培训】阿里P8面试官：什么样的人能进阿里</a><br><a href="https://q.cnblogs.com/" target="_blank" οnclick="ga('send', 'event', 'Link', 'click', 'T2-博问')">【推荐】程序员问答平台，解决您开发中遇到的技术难题</a><br></div>
<div id="opt_under_post"></div>
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>
<script>
  googletag.cmd.push(function() {
        googletag.defineSlot('/1090369/C1', [300, 250], 'div-gpt-ad-1546353474406-0').addService(googletag.pubads());
        googletag.defineSlot('/1090369/C2', [468, 60], 'div-gpt-ad-1539008685004-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
  });
</script>
<div id="cnblogs_c1" class="c_ad_block">
    <div id="div-gpt-ad-1546353474406-0" style="height:250px; width:300px;" data-google-query-id="CMSp65r55-ICFRi_vQodZ90OQQ"><div id="google_ads_iframe_/1090369/C1_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C1_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C1_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="1" data-load-complete="true"></iframe></div></div>
</div>
<div id="under_post_news"><div class="recomm-block"><b>相关博文：</b><br>·  <a href="https://www.cnblogs.com/chuhj/p/7230360.html" target="_blank" οnclick="clickRecomItmem(7230360)">前端数据可视化echarts.js使用指南</a><br>·  <a href="https://www.cnblogs.com/caoxueying2018/p/9700391.html" target="_blank" οnclick="clickRecomItmem(9700391)">前端数据可视化echarts.js</a><br>·  <a href="https://www.cnblogs.com/zouyun/p/8985257.html" target="_blank" οnclick="clickRecomItmem(8985257)">前端数据可视化echarts.js使用指南</a><br>·  <a href="https://www.cnblogs.com/llljpf/p/6762984.html" target="_blank" οnclick="clickRecomItmem(6762984)">前端数据可视化echarts.js使用指南</a><br>·  <a href="https://www.cnblogs.com/lvxisha/p/9721065.html" target="_blank" οnclick="clickRecomItmem(9721065)">前端可视化数据--echarts</a><br></div></div>
<div id="cnblogs_c2" class="c_ad_block">
    <div id="div-gpt-ad-1539008685004-0" style="height:60px; width:468px;" data-google-query-id="CI3F7Jr55-ICFRi_vQodZ90OQQ"><div id="google_ads_iframe_/1090369/C2_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C2_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C2_0" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="2" data-load-complete="true"></iframe></div></div>
</div>
<div id="under_post_kb"><div class="itnews c_ad_block"><b>最新新闻</b>：<br> ·  <a href="https://news.cnblogs.com/n/626844/" target="_blank">太阳几千年发一次脾气 仍会爆发“超级耀斑”</a><br> ·  <a href="https://news.cnblogs.com/n/626843/" target="_blank">2018安卓应用安全白皮书：超98%安卓应用存有安全风险</a><br> ·  <a href="https://news.cnblogs.com/n/626842/" target="_blank">投资人呼吁索尼剥离半导体卖掉金融 专心做娱乐巨头</a><br> ·  <a href="https://news.cnblogs.com/n/626841/" target="_blank">科学家在月球南极发现大片区域的金属物质分布</a><br> ·  <a href="https://news.cnblogs.com/n/626840/" target="_blank">深网 | 对话锤子0001号员工朱萧木：做电子烟也是理想主义</a><br>» <a href="http://news.cnblogs.com/" title="IT新闻" target="_blank">更多新闻...</a></div></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
 if(enablePostBottom()) {
    codeHighlight();
    fixPostBody();
    setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
    deliverT2();
    deliverC1();
    deliverC2();    
    loadNewsAndKb();
    loadBlogSignature();
    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
    loadOptUnderPost();
    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);  
}
</script>
</div>

    
    </div><!--end: forFlow -->
    </div>

上帝代言人
关注
专栏目录
js中使用echarts
董小礼的博客
09-23 9213
1.下载echart.js 注意：这里介绍的是纯原生js使用echarts，如果使用的是vue环境，请移步我的另一篇文章：vue-cli中使用echarts 这是官方的下载地址 https://echarts.apache.org/zh/download.html 2.在html引用 <script type="text/javascript" src="Echarts.js">&lt...
Echartjs的使用未完
weixin_54048131的博客
08-28 123
yAxis(y轴),xAxis（x轴）/ea,ke,sei,s/,grid(绘图网格)，color（两条线颜色),tooltip(提示框组件)/tool taip/,toolbox(工具框组件)，legend(图例组件)/lei,gen,te/title(标题组件)。echart的使用遵循着创建实例对象，设置配置项和数据，当出现多个实例对象的时候，为了避免option的重复使用引起的变量重复的问题，因此使用立即执行函数，其里面的都是局部变量。
使用Echarts-X.JS实现3D地球
07-06
使用echarts-x实现3D地球，并完美解决“myChart is not function”的错误。
js如何使用Echarts详解
最新发布
wangxuanyang_zer的博客
10-22 1025
首先，在您的HTML文件中，确保已经包含了ECharts库的JavaScript文件。您可以从ECharts官方网站下载并引入它。在HTML中，创建一个元素来容纳图表。给该元素指定一个唯一的ID，以便在JavaScript中引用它。同时，通过CSS设置容器的宽度和高度，以定义图表的尺寸。使用JavaScript来创建和配置图表。
如何使用echarts.js
mubo970901的博客
01-15 453
如何引入echarts.js 下载安装包npm i echarts 在main.js里面引用 导入echarts时用：import echarts from ‘echarts’ 出现 “Cannot read property ‘init’ of undefined” 报错，改成 import * as echarts from ‘echarts’ 后解决。 代码如下： import * as echarts from ‘echarts’ Vue.prototype.$echarts = echarts 如
Echarts.js使用技巧
m0_52364694的博客
09-13 236
使用Echarts关键点就在于要使用文档规定的关键字，如果大小写不分就会导致错误 如,feature对象中saveAsImage写成savaAsimage（i小写）就不会显示功能图标
WPF调用Echart，通过JS与WPF数据交换
04-25
C#中可以使用`System.Web.Script.Serialization`命名空间的`JavaScriptSerializer`类将C#对象序列化为JSON字符串，而在JS端则可以使用`JSON.parse()`方法将JSON字符串转换为JavaScript对象。 7. **实例步骤** - ...
webkit.net使用echartjs
07-16
<script src="echarts.min.js"> ``` 接下来，我们可以在Webkit.net的代码中使用ECharts的API来创建和配置图表。可以通过调用`echarts.init`方法来初始化一个图表实例，并传入一个DOM元素作为容器。例如： ```...
echart 地图js json .rar
05-11
在“echart 地图js json.rar”这个压缩包中，包含的文件主要用于实现ECharts中的地图可视化功能。 1. **ECharts地图组件**： ECharts的地图组件可以让用户在地图上展示数据，支持多种地图类型，如世界地图、中国...
Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）
03-17
首先，让我们关注标题中的"Qt编写echart仪表盘JS交互程序"。这涉及到在Qt的Webkit或WebEngine视图组件中嵌入ECharts图表，并通过JavaScript API进行配置和操作。在Qt中，我们可以使用QWebView（对于WebKit）或...
echart.js文件
11-22
echart.js文件主要用于数据的可视化，提供了多种可视化样例。
echart.js完整版包
03-08
echart完整版包，可以直接在项目js文件夹中上传，在项目中可以使用echart网站的多样图标满足BI开发需求。
echar js 库文件
07-05
echar js 库文件
echarts的geoJson数据
03-05
echarts的geoJson数据，包括全国的geojson数据以及各省份，各地市的数据。
数据可视化-ECharts.js的基本使用
廖若星辰-LTY
07-25 5774
数据可视化是前端必备技能之一，可视化插件也是非常常用且实用的一个插件，这里简单介绍一下ECharts.js这个插件的基本使用步骤。 ECharts.js是百度出品的一个开源javascript数据可视化库，是目前国内最常用、最热门的一个基于javaScript的数据可视化插件。 下面是ECharts.js的网址： ECharts官网地址：https://www.echartsjs.com/zh/index.html/Apache ECharts：https://echarts.apache.org/.
js中ECharts基础
weixin_46048542的博客
11-11 8156
ECharts是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome,t Firefox，Safari等) ，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
JavaScript之ECharts 入门级教程
zhong_333的博客
10-16 3422
<title>第一个 ECharts 实例</title>-- 引入 echarts.js -->
EChart.js简单入门
weixin_34026484的博客
05-22 435
一、几种统计图库： 1.MSChart : 这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。 2.ichartjs : 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。 3.Chart.js : 也是一款基于HTML5的图形库和ichartjs...
echart 多柱图只显示部分数据标签_EChart.js 简单入门
weixin_39879219的博客
11-24 2044
最近有一个统计的项目要做，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。MSChart 这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。ichartjs是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。Chart.js也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值