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>

参与评论 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值