百度Echarts-免费的商业产品图表库

时间：2022-08-23 00:02:16

官方网站：http://echarts.baidu.com/

民间网站：http://fansunion.cn/echarts/

下载地址：https://codeload.github.com/ecomfe/echarts/zip/1.3.1

API&Doc：http://echarts.baidu.com/doc/doc.html

简要介绍

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。

用法示例

1. 在线访问

  http://echarts.baidu.com/doc/example.html

2. 下载查看

 下载包的 doc/example目录 有很多示例。

小试牛刀

官方的例子，我看了下。引用了很多js和css文件，不够简明。

而我想要的是那种非常简介的或者是核心步骤的Example，于是我自己写了几个。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta content='text/html;charset=utf-8' http-equiv='content-type'>  
  5.  <title>Echarts图表Demo</title>  
  6.  <script src="js/esl/esl.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.   
  11. <div id="line" style="width:800px;height:600px;">  </div>  
  12.  <script type="text/javascript">  
  13.   
  14.  var fileLocation ='js/echarts';  //注意：这个echarts是一个echarts.js文件，是额外定义的
  15. require.config({  
  16.      
  17.     paths:{  
  18.           echarts: fileLocation,  
  19.             'echarts/chart/line': fileLocation,  
  20.             'echarts/chart/bar': fileLocation,  
  21.             'echarts/chart/pie': fileLocation  
  22.     }  
  23. });  
  24.   
  25. // 作为入口  
  26. require(  
  27.     [  
  28.         'echarts',  
  29.         'echarts/chart/line'  
  30.     ],  
  31.       
  32.     displayChart  
  33.       
  34. );  
  35.   
  36. function displayChart(ec) {  
  37.          //折线图  
  38.         var lineChart = ec.init(document.getElementById('line'));  
  39.         var lineChartOtion = getLineChartOption();      
  40.         lineChart.setOption(lineChartOtion);  
  41.     }  
  42.   
  43.     //获得Line图的选项和数据  
  44.     function getLineChartOption(){  
  45.     var lineChartOption={  
  46.     title : {  
  47.         text: '未来一周气温变化',  
  48.         subtext: '纯属虚构'  
  49.     },  
  50.     tooltip : {  
  51.         trigger: 'axis'  
  52.     },  
  53.     legend: {  
  54.         data:['最高气温','最低气温']  
  55.     },  
  56.     toolbox: {  
  57.         show : true,  
  58.         feature : {  
  59.             mark : true,  
  60.             dataView : {readOnly: false},  
  61.             magicType:['line', 'bar'],  
  62.             restore : true,  
  63.             saveAsImage : true  
  64.         }  
  65.     },  
  66.     calculable : true,  
  67.     xAxis : [  
  68.         {  
  69.             type : 'category',  
  70.             boundaryGap : false,  
  71.             data : ['周一','周二','周三','周四','周五','周六','周日']  
  72.         }  
  73.     ],  
  74.     yAxis : [  
  75.         {  
  76.             type : 'value',  
  77.             axisLabel : {  
  78.                 formatter: '{value} °C'  
  79.             },  
  80.             splitArea : {show : true}  
  81.         }  
  82.     ],  
  83.     series : [  
  84.         {  
  85.             name:'最高气温',  
  86.             type:'line',  
  87.             itemStyle: {  
  88.                 normal: {  
  89.                     lineStyle: {  
  90.                         shadowColor : 'rgba(0,0,0,0.4)'  
  91.                     }  
  92.                 }  
  93.             },  
  94.             data:[11, 11, 15, 13, 12, 13, 10]  
  95.         },  
  96.         {  
  97.             name:'最低气温',  
  98.             type:'line',  
  99.             itemStyle: {  
  100.                 normal: {  
  101.                     lineStyle: {  
  102.                         shadowColor : 'rgba(0,0,0,0.4)'  
  103.                     }  
  104.                 }  
  105.             },  
  106.             data:[-2, 1, 2, 5, 3, 2, 0]  
  107.         }  
  108.     ]  
  109. };  
  110. return lineChartOption;  
  111.     }  
  112.   
  113. </script>  
</ body >   
  1. </html>  

下载地址：http://download.csdn.net/detail/fansunion/6629107(修改后的示例)

原文链接 ： http://FansUnion.cn/articles/3319 (小雷网-FansUnion.cn)和http://blog.csdn.net/fansunion/article/details/17024055

标签：

相关文章