简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  echart插件等基本使用介紹

echart插件等基本使用介紹

巴扎黑
巴扎黑原創
2017-08-12 16:15:052964瀏覽

這篇文章主要介紹了echart簡介，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

1. 插件的下載

以下是ECharts的下載鏈接，需要注意的是ECharts內部也是依賴於另一個插件的叫ZRender，當然對於大部分圖表而言不需要ZRender的，但是對於地圖控件及其他複雜的呈現控件而已都是需要ZRender的。為了避免不要的問題出現，建議大家在下載ECharts時同時也要下載ZRender。

ECharts下載網址： http://echarts.baidu.com/

ZRender下載網址：http://ecomfe.github.io/zrender/index. html

下載後解壓縮各自的檔案目錄結構如下：

ECharts：

##     

# ZRender:

 


2. 外掛程式的引用

#首先，新建一個Web應用程序，然後添加剛剛下載的文件，具體的目錄結構如下：


這裡有以下幾點需要說明：

  • 所有的跟ECharts有關的檔案全部都在echarts資料夾下

  • echarts資料夾的內容分為兩部分

1) 一部分是以echarts開頭的js文件，這些文件全部來自於1.中的ECharts文件目錄中的js資料夾下的文件，也就是1.中的圖中紅框標示的js下的檔案。如下：

2)另一部分是名為zrender的資料夾，這裡需要特別注意的是該資料夾的命名必須為zrender，因為在echarts的js文件中對zrender的引用都是以zrender為根目錄的，zrender資料夾的內容即為1.中zrender檔案目錄中的src資料夾下的內容，如下：


3. 在頁面中的具體使用

#按照上邊的步驟配置過之後，我們就可以在頁面中引用了，這裡我主要是示範地圖控制項的使用方式，因為地圖的引用跟其他的基本圖形的引用不太一樣。其他的圖形的呈現也會做一個簡單的示範。

MapChart

首先在跟2中的echarts資料夾同一個目錄（也就是Modules資料夾）下新增一個aspx頁或html頁，要注意的是，如果是在aspx頁使用echarts時，需要把要渲染的p放在form標籤之外，否則圖形是顯示不出來的。


在head標籤中加入echarts的參考如下：


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

在body標記中， form標記之外，增加一個p，用來做圖表渲染的容器。如下：



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

在上面新增的p標記下，加入如下的js程式碼段，如下：



 <script type="text/javascript"> 
 
    //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。 
这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。 
 
    require.config({ 
 
      paths: { 
 
        echarts:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/map&#39;:&#39;./echarts/echarts-map&#39; 
 
      } 
 
    }); 
 
   //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径 
 
    require( 
 
    [ 
 
      &#39;echarts&#39;, 
 
      &#39;echarts/chart/map&#39; 
 
    ], 
 
    function (ec) { 
 
      varmyChart=ecinit(documentgetElementById(&#39;main&#39;)); 
 
      //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档 
 
option= { 
 
        title: { 
 
          text:&#39;iphone销量&#39;, 
 
          subtext:&#39;纯属虚构&#39;, 
 
          x:&#39;center&#39; 
 
        }, 
 
        tooltip: { 
 
          trigger:&#39;item&#39; 
 
        }, 
 
        legend: { 
 
          orient:&#39;vertical&#39;, 
 
          x:&#39;left&#39;, 
 
          data: [&#39;iphone3&#39;,&#39;iphone4&#39;,&#39;iphone5&#39;] 
 
        }, 
 
        dataRange: { 
 
          min:0, 
 
          max:2500, 
 
          text: [&#39;高&#39;,&#39;低&#39;],      
 
          calculable:true, 
 
          textStyle: { 
 
            color:&#39;orange&#39; 
 
          } 
 
        }, 
 
        toolbox: { 
 
          show:true, 
 
          orient:&#39;vertical&#39;, 
 
          x:&#39;right&#39;, 
 
          y:&#39;center&#39;, 
 
          feature: { 
 
            mark:true, 
 
            dataView: { readOnly:false }, 
 
            restore:true, 
 
            saveAsImage:true 
 
          } 
 
        }, 
 
        series: [ 
 
    { 
 
      name:&#39;iphone3&#39;, 
 
      type:&#39;map&#39;, 
 
      mapType:&#39;china&#39;, 
 
      selectedMode: &#39;single&#39;, 
 
      itemStyle: { 
 
        normal: { label: { show:true },color:&#39;#ffd700&#39; },// for legend 
 
        emphasis: { label: { show:true} } 
 
      }, 
 
      data: [ 
 
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;重庆&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;河北&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;河南&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;云南&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;辽宁&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;黑龙江&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;湖南&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;安徽&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;山东&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;新疆&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;江苏&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;浙江&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;江西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;湖北&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;广西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;甘肃&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;山西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;内蒙古&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;陕西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;吉林&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;福建&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;贵州&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;青海&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;西藏&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;四川&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;宁夏&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;海南&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;台湾&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
 
      ] 
 
    }, 
 
    { 
 
      name:&#39;iphone4&#39;, 
 
      type:&#39;map&#39;, 
 
      mapType:&#39;china&#39;, 
 
      selectedMode: &#39;single&#39;, 
 
      itemStyle: { 
 
        normal: { label: { show:true },color:&#39;#ff8c00&#39; },// for legend 
 
        emphasis: { label: { show:true} } 
 
      }, 
 
      data: [ 
 
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;重庆&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;河北&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;安徽&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;新疆&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;浙江&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;江西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;山西&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;内蒙古&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;吉林&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;福建&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;西藏&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;四川&#39;,value:Math.round(Math.random() *1000) }, 

        { name:&#39;宁夏&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
 
      ] 
 
    }, 
 
    { 
 
      name:&#39;iphone5&#39;, 
 
      type:&#39;map&#39;, 
 
      mapType:&#39;china&#39;, 
 
      selectedMode: &#39;single&#39;, 
 
      itemStyle: { 
 
        normal: { label: { show:true },color:&#39;#da70d6&#39; },// for legend 
 
        emphasis: { label: { show:true} } 
 
      }, 
 
      data: [ 
 
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;台湾&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
 
      ] 
 
    } 
  ] 
      }; 
       //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。 
       //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 &#39;single&#39;即单选，也可多选 
  varecConfig= require(&#39;echarts/config&#39;); 
      myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) { 
        varselected=param.selected; 
        varmapSeries=option.series[0]; 
        vardata= []; 
        varlegendData= []; 
        varname; 
        for (varp=0,len=mapSeries.data.length; p<len; p++) { 
          name=mapSeries.data[p].name; 
          mapSeries.data[p].selected=selected[name]; 
          if (selected[name]) { 
            alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作  
 
          } 
        } 
      });         
      myChart.setOption(option); 
    } 
  ); 
  </script>

完成上述操作之後，效果如下圖所示：

 

LineChart

除了地圖圖表之外的其他的圖示的使用方式都差不多。事實上其他的圖表跟地圖圖表的區別在於對配置文件的引用。這裡只做一個折線圖的範例，它的範例都是一樣的。 



<scripttype="text/javascript"> 
 
    require.config({ 
 
      paths: { 
 
        echarts:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;,//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外， 
其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别 
 
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
 
      } 
 
    }); 
 
    require( 
 
    [ 
 
      &#39;echarts&#39;, 
 
      &#39;echarts/chart/bar&#39;, 
 
      &#39;echarts/chart/line&#39; 
 
    ], 
 
    function (ec) { 
 
      varmyChart=ecinit(documentgetElementById(&#39;main&#39;)); 
 
      option= { 
 
        tooltip: { 
 
          trigger:&#39;axis&#39; 
 
        }, 
 
        legend: { 
 
          data: [&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;直接问&#39;,&#39;搜索引擎&#39;] 
 
        }, 
 
        toolbox: { 
 
          show:true, 
 
          feature: { 
 
            mark:true, 
 
            dataView: { readOnly:false }, 
 
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
 
            restore:true, 
 
            saveAsImage:true 
 
          } 
 
        }, 
 
        calculable:true, 
 
        xAxis: [ 
 
    { 
 
      type:&#39;category&#39;, 
 
      boundaryGap:false, 
 
      data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
 
    } 
 
  ], 
 
        yAxis: [ 
 
    { 
 
      type:&#39;value&#39;, 
 
      splitArea: { show:true } 
 
    } 
 
  ], 
 
        series: [ 
 
    { 
 
      name:&#39;邮件营销&#39;, 
 
      type:&#39;line&#39;, 
 
      stack:&#39;总量&#39;, 
 
      data: [120,132,101,134,90,230,210] 
 
    }, 
 
    { 
 
      name:&#39;联盟广告&#39;, 
 
      type:&#39;line&#39;, 
 
      stack:&#39;总量&#39;, 
 
      data: [220,182,191,234,290,330,310] 
 
    }, 
 
    { 
 
      name:&#39;视频广告&#39;, 
 
      type:&#39;line&#39;, 
 
      stack:&#39;总量&#39;, 
 
      data: [150,232,201,154,190,330,410] 
 
    }, 
 
    { 
 
      name:&#39;直接访问&#39;, 
 
      type:&#39;line&#39;, 
 
      stack:&#39;总量&#39;, 
 
      data: [320,332,301,334,390,330,320] 
 
    }, 
 
    { 
 
      name:&#39;搜索引擎&#39;, 
 
      type:&#39;line&#39;, 
 
      stack:&#39;总量&#39;, 
 
      data: [820,932,901,934,1290,1330,1320] 
 
    } 
 
  ] 
 
      };           
 
  
 
      myChart.setOption(option); 
 
    } 
 
  ); 
 
  </script> 
 
  
 
  
 
  <pid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></p>   
 
  <scripttype="text/javascript"> 
 
    require.config({ 
 
      paths: { 
 
        echarts:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
 
      } 
 
    }); 
 
    require( 
 
    [ 
 
      &#39;echarts&#39;, 
 
      &#39;echarts/chart/bar&#39;, 
 
      &#39;echarts/chart/line&#39; 
 
    ], 
 
    function (ec) { 
 
      varmyChart=ecinit(documentgetElementById(&#39;main1&#39;)); 
 
      option= { 
 
        title: { 
 
          text:&#39;未来一周气温变化&#39;, 
 
          subtext:&#39;纯属虚构&#39; 
 
        }, 
 
        tooltip: { 
 
          trigger:&#39;axis&#39; 
 
        }, 
 
        legend: { 
 
          data: [&#39;最高气温&#39;最低气温&#39;] 
 
        }, 
 
        toolbox: { 
 
          show:true, 
 
          feature: { 
 
            mark:true, 
 
            dataView: { readOnly:false }, 
 
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
 
            restore:true, 
 
            saveAsImage:true 
 
          } 
 
        }, 
 
        calculable:true, 
 
        xAxis: [ 
 
    { 
 
      type:&#39;category&#39;, 
 
      boundaryGap:false, 
 
      data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
 
    } 
 
  ], 
 
        yAxis: [ 
 
    { 
 
      type:&#39;value&#39;, 
 
      axisLabel: { 
 
        formatter:&#39;{value} &#39; 
 
      }, 
 
      splitArea: { show:true } 
 
    } 
 
  ], 
 
        series: [ 
 
    { 
 
      name:&#39;最高气温&#39;, 
 
      type:&#39;line&#39;, 
 
      itemStyle: { 
 
        normal: { 
 
          lineStyle: { 
 
            shadowColor:&#39;rgba(0,0,0,4)&#39; 
 
          } 
 
        } 
 
      }, 
 
      data: [11,11,15,13,12,13,10] 
 
    }, 
 
    { 
 
      name:&#39;最低气温&#39;, 
 
      type:&#39;line&#39;, 
 
      itemStyle: { 
 
        normal: { 
 
          lineStyle: { 
 
            shadowColor:&#39;rgba(0,0,0,4)&#39; 
 
          } 
 
        } 
 
      }, 
 
      data: [-2,1,2,5,3,2,0] 
 
    } 
 
  ] 
 
      };           
 
      myChart.setOption(option); 
 
    } 
 
  ); 
 
  </script> 
 
  
 
  
 
  <pid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></p>   
 
  <scripttype="text/javascript"> 
 
    require.config({ 
 
      paths: { 
 
        echarts:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;, 
 
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
 
      } 
 
    }); 
 
    require( 
 
    [ 
 
      &#39;echarts&#39;, 
 
      &#39;echarts/chart/bar&#39;, 
 
      &#39;echarts/chart/line&#39; 
 
    ], 
 
    function (ec) { 
 
      varmyChart=ec.init(document.getElementById(&#39;main2&#39;)); 
 
      option= { 
 
        title: { 
 
          text:&#39;某楼盘销售情况&#39;, 
 
          subtext:&#39;纯属虚构&#39; 
 
        }, 
 
        tooltip: { 
 
          trigger:&#39;axis&#39; 
 
        }, 
 
        legend: { 
 
          data: [&#39;意向&#39;,&#39;预购&#39;,&#39;成交&#39;] 
 
        }, 
 
        toolbox: { 
 
          show:true, 
 
          feature: { 
 
            mark:true, 
 
            dataView: { readOnly:false }, 
 
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
 
            restore:true, 
 
            saveAsImage:true 
 
          } 
 
        }, 
 
        calculable:true, 
 
        xAxis: [ 
 
    { 
 
      type:&#39;category&#39;, 
 
      boundaryGap:false, 
 
      data: [&#39;周&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
 
    } 
 
  ], 
 
        yAxis: [ 
 
    { 
 
      type:&#39;value&#39; 
 
    } 
 
  ], 
 
        series: [ 
 
    { 
 
      name:&#39;成交&#39;, 
 
      type:&#39;line&#39;, 
 
      smooth:true, 
 
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
 
      data: [10,12,21,54,260,830,710] 
 
    }, 
 
    { 
 
      name:&#39;预购&#39;, 
 
      type:&#39;line&#39;, 
 
      smooth:true, 
 
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
 
      data: [30,182,434,791,390,30,10] 
 
    }, 
 
    { 
 
      name:&#39;意向&#39;, 
 
      type:&#39;line&#39;, 
 
      smooth:true, 
 
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
 
      data: [1320,1132,601,234,120,90,20] 
 
    } 
 
  ] 
 
      };           
 
      myChart.setOption(option); 
 
    } 
 
  ); 
 
  </script>

完成上述動作後效果圖如下：

 

以上是echart插件等基本使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Echarts用法詳細介紹下一篇：Echarts用法詳細介紹

相關文章

看更多