1. 全栈程序员必看首页

ECharts使用心得「建议收藏」

全栈程序员-用户IM • • 未分类

ECharts使用心得

大家好，又见面了，我是全栈君。

ECharts使用心得

前言

上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。

1.    插件的下载

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址： http://echarts.baidu.com/

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

下载之后解压各自的文件目录结构如下：

ECharts：

                 ECharts使用心得「建议收藏」     

ZRender:

 ECharts使用心得「建议收藏」

2.    插件的引用

首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：

 ECharts使用心得「建议收藏」

这里有以下几点需要说明：

l  所有的跟ECharts有关的文件全部都在echarts文件夹下

l  echarts文件夹的内容分为两部分

1)       一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：

 ECharts使用心得「建议收藏」

2)       另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：

 ECharts使用心得「建议收藏」

3.    在页面中的具体使用

按照上边的步骤配置过之后，我们就可以在页面中引用了，这里我主要是演示地图控件的使用方式，因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。

3.1          MapChart

首先在跟2中的echarts文件夹同一个目录（也就是Modules文件夹）下添加一个aspx页或html页，需要注意的是，如果是在aspx页中使用echarts时，需要把要渲染的div放在form标签之外，否则图形是显示不出来的。

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

[csharp] 
view plain  
copy

 

  1. <head runat=“server”>  
  2.     <title></title>  
  3.     <script src=“echarts/esl.js” type=“text/javascript”></script>  
  4. </head>  

 

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

[csharp] 
view plain  
copy

 

  1. <body>  
  2.   
  3. <div id=“main”style=“height:500px;border:1px solid #ccc;padding:10px;”></div>  
  4.   
  5. ……………  
  6.   
  7. ……………  
  8.   
  9. </body>  

 

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

 

[csharp] 
view plain  
copy

 

  1.  <script type=“text/javascript”>  
  2.   
  3.        //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。  
  4. 这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。  
  5.   
  6.         require.config({  
  7.   
  8.             paths: {  
  9.   
  10.                 echarts:‘./echarts/echarts’,  
  11.   
  12.                 ‘echarts/chart/map’:‘./echarts/echarts-map’  
  13.   
  14.             }  
  15.   
  16.         });  
  17.   
  18.       //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径  
  19.   
  20.         require(  
  21.   
  22.         [  
  23.   
  24.             ‘echarts’,  
  25.   
  26.             ‘echarts/chart/map’  
  27.   
  28.         ],  
  29.   
  30.         function (ec) {  
  31.   
  32.             varmyChart=ec.init(document.getElementById(‘main’));  
  33.   
  34.             //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档  
  35.   
  36. option= {  
  37.   
  38.                 title: {  
  39.   
  40.                     text:‘iphone销¨²量¢?’,  
  41.   
  42.                     subtext:‘纯ä?属º?虚¨¦构1’,  
  43.   
  44.                     x:‘center’  
  45.   
  46.                 },  
  47.   
  48.                 tooltip: {  
  49.   
  50.                     trigger:‘item’  
  51.   
  52.                 },  
  53.   
  54.                 legend: {  
  55.   
  56.                     orient:‘vertical’,  
  57.   
  58.                     x:‘left’,  
  59.   
  60.                     data: [‘iphone3’,‘iphone4’,‘iphone5’]  
  61.   
  62.                 },  
  63.   
  64.                 dataRange: {  
  65.   
  66.                     min:0,  
  67.   
  68.                     max:2500,  
  69.   
  70.                     text: [‘高?’,‘低̨ª’],           // 文?本À?，ê?默?认¨?为a数ºy值¦Ì文?本À?  
  71.   
  72.                     calculable:true,  
  73.   
  74.                     textStyle: {  
  75.   
  76.                         color:‘orange’  
  77.   
  78.                     }  
  79.   
  80.                 },  
  81.   
  82.                 toolbox: {  
  83.   
  84.                     show:true,  
  85.   
  86.                     orient:‘vertical’,  
  87.   
  88.                     x:‘right’,  
  89.   
  90.                     y:‘center’,  
  91.   
  92.                     feature: {  
  93.   
  94.                         mark:true,  
  95.   
  96.                         dataView: { readOnly:false },  
  97.   
  98.                         restore:true,  
  99.   
  100.                         saveAsImage:true  
  101.   
  102.                     }  
  103.   
  104.                 },  
  105.   
  106.                 series: [  
  107.   
  108.         {  
  109.   
  110.             name:‘iphone3’,  
  111.   
  112.             type:‘map’,  
  113.   
  114.             mapType:‘china’,  
  115.   
  116.             selectedMode: ‘single’,  
  117.   
  118.             itemStyle: {  
  119.   
  120.                 normal: { label: { show:true },color:‘#ffd700’ },// for legend  
  121.   
  122.                 emphasis: { label: { show:true} }  
  123.   
  124.             },  
  125.   
  126.             data: [  
  127.   
  128.                 { name:‘北À¡À京?’,value:Math.round(Math.random() *1000) },  
  129.   
  130.                 { name:‘天¬¨¬津¨°’,value:Math.round(Math.random() *1000) },  
  131.   
  132.                 { name:‘上¦?海¡ê’,value:Math.round(Math.random() *1000) },  
  133.   
  134.                 { name:‘重?庆¨¬’,value:Math.round(Math.random() *1000) },  
  135.   
  136.                 { name:‘河¨®北À¡À’,value:Math.round(Math.random() *1000) },  
  137.   
  138.                 { name:‘河¨®南?’,value:Math.round(Math.random() *1000) },  
  139.   
  140.                 { name:‘云?南?’,value:Math.round(Math.random() *1000) },  
  141.   
  142.                 { name:‘辽¢¨¦宁t’,value:Math.round(Math.random() *1000) },  
  143.   
  144.                 { name:‘黑¨²龙¢¨²江-‘,value:Math.round(Math.random() *1000) },  
  145.   
  146.                 { name:‘湖t南?’,value:Math.round(Math.random() *1000) },  
  147.   
  148.                 { name:‘安ã2徽?’,value:Math.round(Math.random() *1000) },  
  149.   
  150.                 { name:‘山¦?东?’,value:Math.round(Math.random() *1000) },  
  151.   
  152.                 { name:‘新?疆?’,value:Math.round(Math.random() *1000) },  
  153.   
  154.                 { name:‘江-苏?’,value:Math.round(Math.random() *1000) },  
  155.   
  156.                 { name:‘浙?江-‘,value:Math.round(Math.random() *1000) },  
  157.   
  158.                 { name:‘江-西¡Â’,value:Math.round(Math.random() *1000) },  
  159.   
  160.                 { name:‘湖t北À¡À’,value:Math.round(Math.random() *1000) },  
  161.   
  162.                 { name:‘广?西¡Â’,value:Math.round(Math.random() *1000) },  
  163.   
  164.                 { name:‘甘¨º肃¨¤’,value:Math.round(Math.random() *1000) },  
  165.   
  166.                 { name:‘山¦?西¡Â’,value:Math.round(Math.random() *1000) },  
  167.   
  168.                 { name:‘内¨²蒙¨¦古?’,value:Math.round(Math.random() *1000) },  
  169.   
  170.                 { name:‘陕¦?西¡Â’,value:Math.round(Math.random() *1000) },  
  171.   
  172.                 { name:‘吉a林¢?’,value:Math.round(Math.random() *1000) },  
  173.   
  174.                 { name:‘福¡ê建¡§’,value:Math.round(Math.random() *1000) },  
  175.   
  176.                 { name:‘贵¨®州Y’,value:Math.round(Math.random() *1000) },  
  177.   
  178.                 { name:‘广?东?’,value:Math.round(Math.random() *1000) },  
  179.   
  180.                 { name:‘青¨¤海¡ê’,value:Math.round(Math.random() *1000) },  
  181.   
  182.                 { name:‘西¡Â藏?’,value:Math.round(Math.random() *1000) },  
  183.   
  184.                 { name:‘四?川䡧’,value:Math.round(Math.random() *1000) },  
  185.   
  186.                 { name:‘宁t夏?’,value:Math.round(Math.random() *1000) },  
  187.   
  188.                 { name:‘海¡ê南?’,value:Math.round(Math.random() *1000) },  
  189.   
  190.                 { name:‘台¬¡§湾ª?’,value:Math.round(Math.random() *1000) },  
  191.   
  192.                 { name:‘香?港?’,value:Math.round(Math.random() *1000) },  
  193.   
  194.                 { name:‘澳ã?门?’,value:Math.round(Math.random() *1000) }  
  195.   
  196.             ]  
  197.   
  198.         },  
  199.   
  200.         {  
  201.   
  202.             name:‘iphone4’,  
  203.   
  204.             type:‘map’,  
  205.   
  206.             mapType:‘china’,  
  207.   
  208.             selectedMode: ‘single’,  
  209.   
  210.             itemStyle: {  
  211.   
  212.                 normal: { label: { show:true },color:‘#ff8c00’ },// for legend  
  213.   
  214.                 emphasis: { label: { show:true} }  
  215.   
  216.             },  
  217.   
  218.             data: [  
  219.   
  220.                 { name:‘北À¡À京?’,value:Math.round(Math.random() *1000) },  
  221.   
  222.                 { name:‘天¬¨¬津¨°’,value:Math.round(Math.random() *1000) },  
  223.   
  224.                 { name:‘上¦?海¡ê’,value:Math.round(Math.random() *1000) },  
  225.   
  226.                 { name:‘重?庆¨¬’,value:Math.round(Math.random() *1000) },  
  227.   
  228.                 { name:‘河¨®北À¡À’,value:Math.round(Math.random() *1000) },  
  229.   
  230.                 { name:‘安ã2徽?’,value:Math.round(Math.random() *1000) },  
  231.   
  232.                 { name:‘新?疆?’,value:Math.round(Math.random() *1000) },  
  233.   
  234.                 { name:‘浙?江-‘,value:Math.round(Math.random() *1000) },  
  235.   
  236.                 { name:‘江-西¡Â’,value:Math.round(Math.random() *1000) },  
  237.   
  238.                 { name:‘山¦?西¡Â’,value:Math.round(Math.random() *1000) },  
  239.   
  240.                 { name:‘内¨²蒙¨¦古?’,value:Math.round(Math.random() *1000) },  
  241.   
  242.                 { name:‘吉a林¢?’,value:Math.round(Math.random() *1000) },  
  243.   
  244.                 { name:‘福¡ê建¡§’,value:Math.round(Math.random() *1000) },  
  245.   
  246.                 { name:‘广?东?’,value:Math.round(Math.random() *1000) },  
  247.   
  248.                 { name:‘西¡Â藏?’,value:Math.round(Math.random() *1000) },  
  249.   
  250.                 { name:‘四?川䡧’,value:Math.round(Math.random() *1000) },  
  251.   
  252.                 { name:‘宁t夏?’,value:Math.round(Math.random() *1000) },  
  253.   
  254.                 { name:‘香?港?’,value:Math.round(Math.random() *1000) },  
  255.   
  256.                 { name:‘澳ã?门?’,value:Math.round(Math.random() *1000) }  
  257.   
  258.             ]  
  259.   
  260.         },  
  261.   
  262.         {  
  263.   
  264.             name:‘iphone5’,  
  265.   
  266.             type:‘map’,  
  267.   
  268.             mapType:‘china’,  
  269.   
  270.             selectedMode: ‘single’,  
  271.   
  272.             itemStyle: {  
  273.   
  274.                 normal: { label: { show:true },color:‘#da70d6’ },// for legend  
  275.   
  276.                 emphasis: { label: { show:true} }  
  277.   
  278.             },  
  279.   
  280.             data: [  
  281.   
  282.                 { name:‘北À¡À京?’,value:Math.round(Math.random() *1000) },  
  283.   
  284.                 { name:‘天¬¨¬津¨°’,value:Math.round(Math.random() *1000) },  
  285.   
  286.                 { name:‘上¦?海¡ê’,value:Math.round(Math.random() *1000) },  
  287.   
  288.                 { name:‘广?东?’,value:Math.round(Math.random() *1000) },  
  289.   
  290.                 { name:‘台¬¡§湾ª?’,value:Math.round(Math.random() *1000) },  
  291.   
  292.                 { name:‘香?港?’,value:Math.round(Math.random() *1000) },  
  293.   
  294.                 { name:‘澳ã?门?’,value:Math.round(Math.random() *1000) }  
  295.   
  296.             ]  
  297.   
  298.         }  
  299.     ]  
  300.             };  
  301.               //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。  
  302.              //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 ‘single’即单选，也可多选  
  303.     varecConfig= require(‘echarts/config’);  
  304.             myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {  
  305.                 varselected=param.selected;  
  306.                varmapSeries=option.series[0];  
  307.                 vardata= [];  
  308.                 varlegendData= [];  
  309.                 varname;  
  310.                 for (varp=0,len=mapSeries.data.length; p<len; p++) {  
  311.                     name=mapSeries.data[p].name;  
  312.                     mapSeries.data[p].selected=selected[name];  
  313.                     if (selected[name]) {  
  314.                         alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作   
  315.   
  316.                     }  
  317.                 }  
  318.             });                  
  319.             myChart.setOption(option);  
  320.         }  
  321.     );  
  322.     </script>  

 

3.1.4  完成以上操作之后，效果如下图所示：

 ECharts使用心得「建议收藏」

3.2 LineChart

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

3.2.1 跟3.1.1一样，引入echarts脚本

3.2.2 跟3.2.2一样，添加渲染图表的div容器

3.2.3 在3.2.2添加的div下添加如下js代码块

[csharp] 
view plain  
copy

 

  1. <scripttype=“text/javascript”>  
  2.   
  3.         require.config({  
  4.   
  5.             paths: {  
  6.   
  7.                 echarts:‘./echarts/echarts’,  
  8.   
  9.                 ‘echarts/chart/bar’:‘./echarts/echarts’,//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，  
  10. 其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别  
  11.   
  12.                 ‘echarts/chart/line’:‘./echarts/echarts’  
  13.   
  14.             }  
  15.   
  16.         });  
  17.   
  18.         require(  
  19.   
  20.         [  
  21.   
  22.             ‘echarts’,  
  23.   
  24.             ‘echarts/chart/bar’,  
  25.   
  26.             ‘echarts/chart/line’  
  27.   
  28.         ],  
  29.   
  30.         function (ec) {  
  31.   
  32.             varmyChart=ec.init(document.getElementById(‘main’));  
  33.   
  34.             option= {  
  35.   
  36.                 tooltip: {  
  37.   
  38.                     trigger:‘axis’  
  39.   
  40.                 },  
  41.   
  42.                 legend: {  
  43.   
  44.                     data: [‘邮®¨º件t营®a销¨²’,‘联¢a盟?广?告?’,‘视º¨®频¦Ì广?告?’,‘直¡À接¨®访¤?问¨º’,‘搜?索¡Â引°y擎?’]  
  45.   
  46.                 },  
  47.   
  48.                 toolbox: {  
  49.   
  50.                     show:true,  
  51.   
  52.                     feature: {  
  53.   
  54.                         mark:true,  
  55.   
  56.                         dataView: { readOnly:false },  
  57.   
  58.                         magicType: [‘line’,‘bar’],  
  59.   
  60.                         restore:true,  
  61.   
  62.                         saveAsImage:true  
  63.   
  64.                     }  
  65.   
  66.                 },  
  67.   
  68.                 calculable:true,  
  69.   
  70.                 xAxis: [  
  71.   
  72.         {  
  73.   
  74.             type:‘category’,  
  75.   
  76.             boundaryGap:false,  
  77.   
  78.             data: [‘周¨¹一°?’,‘周¨¹二t’,‘周¨¹三¨y’,‘周¨¹四?’,‘周¨¹五?’,‘周¨¹六¢¨´’,‘周¨¹日¨?’]  
  79.   
  80.         }  
  81.   
  82.     ],  
  83.   
  84.                 yAxis: [  
  85.   
  86.         {  
  87.   
  88.             type:‘value’,  
  89.   
  90.             splitArea: { show:true }  
  91.   
  92.         }  
  93.   
  94.     ],  
  95.   
  96.                 series: [  
  97.   
  98.         {  
  99.   
  100.             name:‘邮®¨º件t营®a销¨²’,  
  101.   
  102.             type:‘line’,  
  103.   
  104.             stack:‘总Á¨¹量¢?’,  
  105.   
  106.             data: [120,132,101,134,90,230,210]  
  107.   
  108.         },  
  109.   
  110.         {  
  111.   
  112.             name:‘联¢a盟?广?告?’,  
  113.   
  114.             type:‘line’,  
  115.   
  116.             stack:‘总Á¨¹量¢?’,  
  117.   
  118.             data: [220,182,191,234,290,330,310]  
  119.   
  120.         },  
  121.   
  122.         {  
  123.   
  124.             name:‘视º¨®频¦Ì广?告?’,  
  125.   
  126.             type:‘line’,  
  127.   
  128.             stack:‘总Á¨¹量¢?’,  
  129.   
  130.             data: [150,232,201,154,190,330,410]  
  131.   
  132.         },  
  133.   
  134.         {  
  135.   
  136.             name:‘直¡À接¨®访¤?问¨º’,  
  137.   
  138.             type:‘line’,  
  139.   
  140.             stack:‘总Á¨¹量¢?’,  
  141.   
  142.             data: [320,332,301,334,390,330,320]  
  143.   
  144.         },  
  145.   
  146.         {  
  147.   
  148.             name:‘搜?索¡Â引°y擎?’,  
  149.   
  150.             type:‘line’,  
  151.   
  152.             stack:‘总Á¨¹量¢?’,  
  153.   
  154.             data: [820,932,901,934,1290,1330,1320]  
  155.   
  156.         }  
  157.   
  158.     ]  
  159.   
  160.             };                     
  161.   
  162.    
  163.   
  164.             myChart.setOption(option);  
  165.   
  166.         }  
  167.   
  168.     );  
  169.   
  170.     </script>  
  171.   
  172.    
  173.   
  174.    
  175.   
  176.     <divid=“main1″style=“height:500px;border:1px solid #ccc;padding:10px;”></div>     
  177.   
  178.     <scripttype=“text/javascript”>  
  179.   
  180.         require.config({  
  181.   
  182.             paths: {  
  183.   
  184.                 echarts:‘./echarts/echarts’,  
  185.   
  186.                 ‘echarts/chart/bar’:‘./echarts/echarts’,  
  187.   
  188.                 ‘echarts/chart/line’:‘./echarts/echarts’  
  189.   
  190.             }  
  191.   
  192.         });  
  193.   
  194.         require(  
  195.   
  196.         [  
  197.   
  198.             ‘echarts’,  
  199.   
  200.             ‘echarts/chart/bar’,  
  201.   
  202.             ‘echarts/chart/line’  
  203.   
  204.         ],  
  205.   
  206.         function (ec) {  
  207.   
  208.             varmyChart=ec.init(document.getElementById(‘main1’));  
  209.   
  210.             option= {  
  211.   
  212.                 title: {  
  213.   
  214.                     text:‘未¡ä来¤¡ä一°?周¨¹气?温?变À?化¡¥’,  
  215.   
  216.                     subtext:‘纯ä?属º?虚¨¦构1’  
  217.   
  218.                 },  
  219.   
  220.                 tooltip: {  
  221.   
  222.                     trigger:‘axis’  
  223.   
  224.                 },  
  225.   
  226.                 legend: {  
  227.   
  228.                     data: [‘最Á?高?气?温?’,‘最Á?低̨ª气?温?’]  
  229.   
  230.                 },  
  231.   
  232.                 toolbox: {  
  233.   
  234.                     show:true,  
  235.   
  236.                     feature: {  
  237.   
  238.                         mark:true,  
  239.   
  240.                         dataView: { readOnly:false },  
  241.   
  242.                         magicType: [‘line’,‘bar’],  
  243.   
  244.                         restore:true,  
  245.   
  246.                         saveAsImage:true  
  247.   
  248.                     }  
  249.   
  250.                 },  
  251.   
  252.                 calculable:true,  
  253.   
  254.                 xAxis: [  
  255.   
  256.         {  
  257.   
  258.             type:‘category’,  
  259.   
  260.             boundaryGap:false,  
  261.   
  262.             data: [‘周¨¹一°?’,‘周¨¹二t’,‘周¨¹三¨y’,‘周¨¹四?’,‘周¨¹五?’,‘周¨¹六¢¨´’,‘周¨¹日¨?’]  
  263.   
  264.         }  
  265.   
  266.     ],  
  267.   
  268.                 yAxis: [  
  269.   
  270.         {  
  271.   
  272.             type:‘value’,  
  273.   
  274.             axisLabel: {  
  275.   
  276.                 formatter:‘{value} °?C’  
  277.   
  278.             },  
  279.   
  280.             splitArea: { show:true }  
  281.   
  282.         }  
  283.   
  284.     ],  
  285.   
  286.                 series: [  
  287.   
  288.         {  
  289.   
  290.             name:‘最Á?高?气?温?’,  
  291.   
  292.             type:‘line’,  
  293.   
  294.             itemStyle: {  
  295.   
  296.                 normal: {  
  297.   
  298.                     lineStyle: {  
  299.   
  300.                         shadowColor:‘rgba(0,0,0,0.4)’  
  301.   
  302.                     }  
  303.   
  304.                 }  
  305.   
  306.             },  
  307.   
  308.             data: [11,11,15,13,12,13,10]  
  309.   
  310.         },  
  311.   
  312.         {  
  313.   
  314.             name:‘最Á?低̨ª气?温?’,  
  315.   
  316.             type:‘line’,  
  317.   
  318.             itemStyle: {  
  319.   
  320.                 normal: {  
  321.   
  322.                     lineStyle: {  
  323.   
  324.                         shadowColor:‘rgba(0,0,0,0.4)’  
  325.   
  326.                     }  
  327.   
  328.                 }  
  329.   
  330.             },  
  331.   
  332.             data: [-2,1,2,5,3,2,0]  
  333.   
  334.         }  
  335.   
  336.     ]  
  337.   
  338.             };                      
  339.   
  340.             myChart.setOption(option);  
  341.   
  342.         }  
  343.   
  344.     );  
  345.   
  346.     </script>  
  347.   
  348.    
  349.   
  350.    
  351.   
  352.     <divid=“main2″style=“height:500px;border:1px solid #ccc;padding:10px;”></div>     
  353.   
  354.     <scripttype=“text/javascript”>  
  355.   
  356.         require.config({  
  357.   
  358.             paths: {  
  359.   
  360.                 echarts:‘./echarts/echarts’,  
  361.   
  362.                 ‘echarts/chart/bar’:‘./echarts/echarts’,  
  363.   
  364.                 ‘echarts/chart/line’:‘./echarts/echarts’  
  365.   
  366.             }  
  367.   
  368.         });  
  369.   
  370.         require(  
  371.   
  372.         [  
  373.   
  374.             ‘echarts’,  
  375.   
  376.             ‘echarts/chart/bar’,  
  377.   
  378.             ‘echarts/chart/line’  
  379.   
  380.         ],  
  381.   
  382.         function (ec) {  
  383.   
  384.             varmyChart=ec.init(document.getElementById(‘main2’));  
  385.   
  386.             option= {  
  387.   
  388.                 title: {  
  389.   
  390.                     text:‘某3楼£¤盘¨¬销¨²售º?情¨¦况?’,  
  391.   
  392.                     subtext:‘纯ä?属º?虚¨¦构1’  
  393.   
  394.                 },  
  395.   
  396.                 tooltip: {  
  397.   
  398.                     trigger:‘axis’  
  399.   
  400.                 },  
  401.   
  402.                 legend: {  
  403.   
  404.                     data: [‘意°a向¨°’,‘预¡è购o’,‘成¨¦交?’]  
  405.   
  406.                 },  
  407.   
  408.                 toolbox: {  
  409.   
  410.                     show:true,  
  411.   
  412.                     feature: {  
  413.   
  414.                         mark:true,  
  415.   
  416.                         dataView: { readOnly:false },  
  417.   
  418.                         magicType: [‘line’,‘bar’],  
  419.   
  420.                         restore:true,  
  421.   
  422.                         saveAsImage:true  
  423.   
  424.                     }  
  425.   
  426.                 },  
  427.   
  428.                 calculable:true,  
  429.   
  430.                 xAxis: [  
  431.   
  432.         {  
  433.   
  434.             type:‘category’,  
  435.   
  436.             boundaryGap:false,  
  437.   
  438.             data: [‘周¨¹一°?’,‘周¨¹二t’,‘周¨¹三¨y’,‘周¨¹四?’,‘周¨¹五?’,‘周¨¹六¢¨´’,‘周¨¹日¨?’]  
  439.   
  440.         }  
  441.   
  442.     ],  
  443.   
  444.                 yAxis: [  
  445.   
  446.         {  
  447.   
  448.             type:‘value’  
  449.   
  450.         }  
  451.   
  452.     ],  
  453.   
  454.                 series: [  
  455.   
  456.         {  
  457.   
  458.             name:‘成¨¦交?’,  
  459.   
  460.             type:‘line’,  
  461.   
  462.             smooth:true,  
  463.   
  464.             itemStyle: { normal: { areaStyle: { type:‘default’}} },  
  465.   
  466.             data: [10,12,21,54,260,830,710]  
  467.   
  468.         },  
  469.   
  470.         {  
  471.   
  472.             name:‘预¡è购o’,  
  473.   
  474.             type:‘line’,  
  475.   
  476.             smooth:true,  
  477.   
  478.             itemStyle: { normal: { areaStyle: { type:‘default’}} },  
  479.   
  480.             data: [30,182,434,791,390,30,10]  
  481.   
  482.         },  
  483.   
  484.         {  
  485.   
  486.             name:‘意°a向¨°’,  
  487.   
  488.             type:‘line’,  
  489.   
  490.             smooth:true,  
  491.   
  492.             itemStyle: { normal: { areaStyle: { type:‘default’}} },  
  493.   
  494.             data: [1320,1132,601,234,120,90,20]  
  495.   
  496.         }  
  497.   
  498.     ]  
  499.   
  500.             };                      
  501.   
  502.             myChart.setOption(option);  
  503.   
  504.         }  
  505.   
  506.     );  
  507.   
  508.     </script>  

 

3.2.4 完成以上操作之后效果图如下：

 ECharts使用心得「建议收藏」

 

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

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/108316.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • 双击映射坚果云网盘并打开的AHK源代码

    双击映射坚果云网盘并打开的AHK源代码

    双击映射坚果云网盘并打开的AHK源代码

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年7月8日
  • DHCP中继代理_三层交换机配置dhcp中继

    DHCP中继代理_三层交换机配置dhcp中继

    DHCP中继代理_三层交换机配置dhcp中继实验目的：1.无中继代理时，DHCP向客户端发送地址段和接收接口地址相同的网段，如果不存在相同网段，就会丢弃请求数据包.2.有中继代理时，服务器能够发送正确IP地址给客户端，是因为有一个被称为option82的选项，这个选项只要DHCP请求数据包被中继后便会自动添加，此选项,中继路由器会在里面的giaddr位置写上参数，这个参数，就是告诉服务器，客户端需要哪个网段的IP地址才能正常工作。…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月15日
  • 人工智能猴子摘香蕉问题状态过程_人工智能原理猴子吃香蕉问题

    人工智能猴子摘香蕉问题状态过程_人工智能原理猴子吃香蕉问题

    人工智能猴子摘香蕉问题状态过程_人工智能原理猴子吃香蕉问题题目：利用一阶谓词逻辑求解猴子摘香蕉问题：房内有一个猴子，一个箱子，天花板上挂了一串香蕉，其位置如图1所示，猴子为了拿到香蕉，它必须把箱子搬到香蕉下面，然后再爬到箱子上。请定义必要的谓词，列出问题的初始化状态（即下图所示状态），目标状态（猴子拿到了香蕉，站在箱子上，箱子位于位置b）。（附加：从初始状态到目标状态的谓词演算过程。）1.定义描述环境状态的谓词。AT(x,w)：x在w处，个体域：x?{monkey}，w?{a,b,c,box}；HOLD(x,t)：x手中拿着t，个体域：t?{box,ba

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月26日
  • 关于C++ const 的全面总结

    关于C++ const 的全面总结

    关于C++ const 的全面总结

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年12月15日
  • spring事务的传播行为和隔离级别_spring常用的事务传播行为

    spring事务的传播行为和隔离级别_spring常用的事务传播行为

    spring事务的传播行为和隔离级别_spring常用的事务传播行为  本文主要介绍下Spring事务中的传播行为。事务传播行为介绍Spring中的7个事务传播行为:事务行为说明PROPAGATION_REQUIRED支持当前事务，假设当前没有事务。就新建一个事务PROPAGATION_SUPPORTS支持当前事务，假设当前没有事务，就以非事务方式运行PROPAGATION_MANDATORY支持当前事务，假设当前没有事…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月29日
  • T10接口_服务端接口和前端接口

    T10接口_服务端接口和前端接口

    T10接口_服务端接口和前端接口本文适用鼎捷软件T100系列1.azzi700注册接口程序号，接口服务名2.设计器code进行签出，下载（空框架）3.设计数据接收的结构，以及开发函数进行数据处理4.程序上传，无提示则表示成功5.打开http://erp_ip/wstopprd/ws/r/awsp920,如果接口地址返回isok则接口是通过的，还可以使用工具postman或者soapui进行调用测试6.检查日志，T100的接口日志存放于$TEMPDIR或者$TEMPLOG,日志的命名规则是按天的，每天调用的所

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月20日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号