ECharts开源图表使用方法简单介绍

ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：http://echarts.baidu.com/index.html

需要先下载插件：https://github.com/ecomfe/echarts/archive/1.4.1.zip

1. 首先需要在文件中引入JS库，可以使用百度的CDN

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

2. 之后创建一个用于显示图表的DIV

<div id="pie" style="height:400px"></div><div id="bar" style="height:400px"></div>

3. 配置加载的图表类型及路径

<script type="text/javascript">// 路径配置
        require.config({paths:{ 'echarts' : 'http://echarts.baidu.com/build/echarts','echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts','echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'}});
</script>

4. 配置图表数据

optionpie = {title: {text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'},tooltip: {trigger: 'item',formatter: "{a}<br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data: ['满意', '不满意']},toolbox: {show: true,feature: {restore: true,saveAsImage: true}},calculable: true,series: [{name: '总满意度百分比',type: 'pie',radius: '55%',center: ['50%', 225],data: [{ value: 100, name: '满意' },{ value: 16, name: '不满意'}]}]
};option = {title: {text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'},tooltip: {trigger: 'axis',formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"},legend: {x: 'right',padding: [5,70,5,5],data: ['满意', '不满意']},toolbox: {show: true,feature: {restore: true,saveAsImage: true}},calculable: true,xAxis: [{type: 'category',data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']}],yAxis: [{type: 'value',splitArea: { show: true }}],series: [{name: '满意',type: 'bar',radius: '55%',center: ['50%', 225],data: [10, 5, 8]},{name: '不满意',type: 'bar',radius: '55%',center: ['50%', 225],data: [2, 4, 6]}]
};

5. 将数据显示在图表中

require(
['echarts','echarts/chart/pie','echarts/chart/bar'
],
function (ec) {//饼状图var pieChart = ec.init(document.getElementById('pie'));pieChart.setOption(optionpie);//柱状图var myChart = ec.init(document.getElementById('bar'));myChart.setOption(option);
}
)

通过以上即可完成图表的配置，这里附上完整的代码

  1 <!DOCTYPE html>
  2 <head>
  3     <meta charset="utf-8">
  4     <title>Demo</title>
  5     <!-- 来自百度CDN -->
  6     <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
  7 </head>
  8 <body>
  9     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 10     <div id="pie" style="height:400px"></div>
 11
 12      <div id="bar" style="height:400px"></div>
 13     <script type="text/javascript">
 14         // 路径配置
 15         require.config({
 16             paths:{
 17                 'echarts' : 'http://echarts.baidu.com/build/echarts',
 18                 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',
 19                 'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
 20             }
 21         });
 22
 23         optionpie = {
 24 title: {
 25 text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'
 26 },
 27 tooltip: {
 28 trigger: 'item',
 29 formatter: "{a}<br/>{b} : {c} ({d}%)"
 30 },
 31 legend: {
 32 orient: 'vertical',
 33 x: 'left',
 34 data: ['满意', '不满意']
 35 },
 36 toolbox: {
 37 show: true,
 38 feature: {
 39 restore: true,
 40 saveAsImage: true
 41 }
 42 },
 43 calculable: true,
 44 series: [
 45 {
 46 name: '总满意度百分比',
 47 type: 'pie',
 48 radius: '55%',
 49 center: ['50%', 225],
 50 data: [
 51 { value: 100, name: '满意' },
 52 { value: 16, name: '不满意'}
 53 ]
 54 }
 55 ]
 56 };
 57 option = {
 58 title: {
 59 text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'
 60 },
 61 tooltip: {
 62 trigger: 'axis',
 63 formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
 64 },
 65 legend: {
 66 x: 'right',
 67 padding: [5,70,5,5],
 68 data: ['满意', '不满意']
 69 },
 70 toolbox: {
 71 show: true,
 72 feature: {
 73 restore: true,
 74 saveAsImage: true
 75 }
 76 },
 77 calculable: true,
 78 xAxis: [
 79 {
 80 type: 'category',
 81 data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']
 82 }
 83 ],
 84 yAxis: [
 85 {
 86 type: 'value',
 87 splitArea: { show: true }
 88 }
 89 ],
 90 series: [
 91 {
 92 name: '满意',
 93 type: 'bar',
 94 radius: '55%',
 95 center: ['50%', 225],
 96 data: [10, 5, 8]},
 97 {
 98 name: '不满意',
 99 type: 'bar',
100 radius: '55%',
101 center: ['50%', 225],
102 data: [2, 4, 6]}
103 ]
104 };
105 require(
106 [
107 'echarts',
108 'echarts/chart/pie',
109 'echarts/chart/bar'
110 ],
111 function (ec) {
112 var pieChart = ec.init(document.getElementById('pie'));
113 pieChart.setOption(optionpie);
114 var myChart = ec.init(document.getElementById('bar'));
115  myChart.setOption(option);
116 }
117 )
118     </script>
119 </body>

View Code

完整代码复制到html中可以直接运行

完整的API可以参考官网：http://echarts.baidu.com/doc/doc.html

转载于:https://www.cnblogs.com/chusdd/p/3700688.html

ECharts开源图表使用方法简单介绍相关推荐

人脸识别开源库face_recognition的简单介绍
人脸识别开源库face_recognition的简单介绍原文出处: https://blog.xugaoxiang.com/ai/face-recognition-cnn.html 软硬件环境 ub ...
ArduPilot开源飞控系统之简单介绍
ArduPilot开源飞控系统之简单介绍 1. 源由 2. 了解&阅读 2.1 ArduPilot历史 2.2 关于GPLv3 2.3 ArduPilot系统组成 2.4 ArduPilot代 ...
基于SIP和RTP协议的开源VOIP之QuteCom简单介绍
**************************************************************************************************** ...
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍，及演示。
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流. ...
黑盒测试概念简述，黑盒测试优缺点、黑盒用例设计方法简单介绍及黑盒测试方法使用总结
黑色测试黑盒测试概念: 黑盒的优缺点介绍: 黑盒测试用例设计方法简单介绍: 黑盒测试方法使用总结: 黑盒测试概念: 又称功能测试或数据驱动测试,是用来检测每个功能是否正常使用.黑盒测试主要意味着测试 ...
【科研系列】专利检索工具及方法简单介绍
Date: 2022.7.10 文章目录 1. 国内专利: 2. 国外专利: 3.使用方法: 专利检索工具及方法简单介绍: 1. 国内专利: (1) soopat: http://www.soopat ...
Echarts开源可视化库学习(一) 介绍与快速上手
介绍 ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
正則表達式基本使用方法简单介绍
正則表達式非常实用, 有些书专门用整本书来讲这个, 可见其博大精深. 有人的地方就有江湖. 有字符串的地方就有正則表達式.所谓的正則表達式, 只是是一种模式/形式罢了. 说白了, 就是一个字符串形式. ...
MediaPlayer使用方法简单介绍
1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlayer(); 也可以使用create的方式,如: MediaPlayer ...

ECharts开源图表使用方法简单介绍

ECharts开源图表使用方法简单介绍相关推荐

最新文章

热门文章