引入ECharts echarts提供多种引入方式，请根据你的项目类型选择合适的方式： 模块化包引入 如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。 需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。 //from echarts examplerequire.config({packages: [{name: 'echarts',location: '../../src',main: 'echarts'},{name: 'zrender',location: '../../../zrender/src', // zrender与echarts在同一级目录main: 'zrender'}]}); 模块化单文件引入（推荐） 如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。 自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件： dist（文件夹） : 经过合并、压缩的单文件 line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar） bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line） scatter.js : 散点图 k.js : K线图 pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel） radar.js : 雷达图 map.js : 地图 force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord） chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force） funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie） gauge.js : 仪表盘 eventRiver.js : 事件河流图 treemap.js : 矩阵树图 venn.js : 韦恩图 echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入 chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载 source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试 采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件 //from echarts example ... 在主文件引入后你将获得一个AMD环境，配置require.conifg如下： //from echarts example ... require.config({ paths: { echarts: './js/dist' } }); require.config配置后就可以通过动态加载使用echarts //from echarts example ... require.config({ paths: { echarts: './js/dist' } }); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); } ); 总结来说，模块化单文件引入ECharts，你需要如下4步： 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的） 通过script标签引入echarts主文件 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行） 详见入门教程 ( Getting started ) » 标签式单文件引入 自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。 标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color') //from echarts example ... var myChart = echarts.init(document.getElementById('main')); var option = { ... } myChart.setOption(option);
您好，
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
echarts怎么设置图形在整个echarts里面的位置，一直居中不太灵活
计算学生的平均成绩和不及格的人数。
struct stu
{
int num;
char *name;
char sex;
float score;
}boy[5]={
{101,"Li ping",'M',45},
{102,"Zhang ping",'M',62.5},
{103,"He fang",'F',92.5},
{104,"Cheng ling",'F',87},
{105,"Wang ming",'M',58},
};
main()
{
int i,c=0;
float ave,s=0;
for(i=0;i<5;i++)
{
s+=boy[i].score;
if(boy[i].score<60) c+=1;
}
printf("s=%f\n",s);
ave=s/5;
printf("average=%f\ncount=%d\n",ave,c);
}
本例程序中定义了一个外部结构数组boy，共5个元素，并作了初始化赋值。在main函数中用for语句逐个累加各元素的score 成员值存于s之中，如score的值小于60(不及格)即计数器C加1，循环完毕后计算平均成绩，并输出全班总分，平均分及不及格人数。
【例11.4】建立同学通讯录
toolbox : {
show: true, //是否显示
orient: 'horizontal', //水平显示(vertical为垂直显示)
x: '770px', //距离X轴多远
feature : {
dataView: {readOnly: false}, //数据视图
magicType : {
type : ['line','bar'], //在折现和柱状间切换
},
restore: {}, //还原
saveAsImage: {} //保存为图片
}
},
//标签,并且非0显示，加在series中
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#615a5a'
},
formatter:function(params){
if(params.value==0){
return '';
}else
{
return params.value;
}
}
}
}
},
//设置ajax访问后台填充饼图
function setChartPie(url,id){
var Chart=require('echarts').init(document.getElementById(id));
Chart.showLoading({text: '正在努力的读取数据中...' });
var label=[];
var value=[];
$.ajax({
url:url,
dataType:"json",
success:function(data){
$.each(data,function(i,p){
label[i]=p['label'];
value[i]={'name':p['label'],'value':p['value']};
});
Chart.hideLoading();
optionPie.legend.data=label;
optionPie.series[0]['data']=value;
optionPie.series[0]['radius']=[0,100];
Chart.setOption(optionPie);
}
});
}
yAxis中先设置 minInterval : 1, 再设置 boundaryGap : [ 0, 0.1 ],
boundaryGap是坐标轴两端空白策略，数组内数值代表百分比，
[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]。比如，你数据是范围是0-120（最小值0，最大值120），那么，[0.5,
1]就表示，在最小值下方扩展50%的空间，在最大值上方扩展100%空间，也就是范围是[0 - 50% * (120 - 0), 120 +
100% * (120 - 0)]即y轴最小坐标为-60，最大坐标为240。
//设置ajax访问后台填充饼图 function setChartPie(url,id){ var Chart=require('echarts').init(document.getElementById(id)); Chart.showLoading({text: '正在努力的读取数据中...' }); var label=[]; var value=[]; $.ajax({ url:url, dataType:"json", success:function(data){ $.each(data,function(i,p){ label[i]=p['label']; value[i]={'name':p['label'],'value':p['value']}; }); Chart.hideLoading(); optionPie.legend.data=label; optionPie.series[0]['data']=value; optionPie.series[0]['radius']=[0,100]; Chart.setOption(optionPie); } }); }
1、创建折线图的数据区（包括年份和数据）。 2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）。 3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框。 4、单击对话框右侧“水平分类轴标签”下的y轴属性设置 position:'right', yAxis : [ { position:'right', type : 'value', splitArea : {show : true} } ], echarts Y轴上的数值是根据注入的参数而决定的，如果没有值，就是0，相反参数越大，y轴的数值也越大 可以在一个坐标上设置多轴线。option 里面： yAxis:[{轴线1的配置项},{轴线2的配置项},{轴线3的配置项}] 在多轴线状态下，可以通过设置 yAxis 的 offset 属性来确定每个轴线的位置 yAxis: [ { type: 'value', min: 0, max: 900 } ] 其实可以的话，应该是 获取y轴最大数据max然后+50（随便，不加也可以）然后取整，在来个循环设成100，,50的倍数（10的倍数都可以，看个人喜好），不这样参差不齐y轴很难看的（因为一般默认是y轴... 参考资料 ldxd：http://www.ldxd.net/read/3-c8-e7-ba-ce-c8-c3echarts-d6-d0y-d6-e1-b5-c4-b5-a5-ce-bb-ce-bb-d3-da-ca-fd-d6-b5-b5-c4-d3-d2-c9-cf-bd-c7.html
点击饼图获取到数据的效果：
html代码：
放2个div，取个id就行。引用写好的js。
测试类型
<div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img">
echarts代码：
1、在BusinessJs/echarts.js中引用echarts及zrender：
http://echarts.baidu.com/option.html#xAxis
xAxis.position string
x 轴的位置。
可选：
'top'
'bottom'
默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
var option={
xAxis:[
{type:'',
data:{},
position:'top'
}
]
}
html代码：
放2个div，取个id就行。引用写好的js。
测试类型
<div id=“div_pieCategory” style=“height:210px;
width: 300px; float: left;” class=“pie_chart_img”>
echarts代码：
1、在BusinessJs/echarts.js中引用echarts及zrender：
require.config（{
packages: [
{
name: 'echarts',
location: './echarts/src',
main: 'echarts'
},
{
name: 'zrender',
location: './zrender/src',// zrender与echarts在同一级目录
main: 'zrender'
}
]
}）；
require（
[
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
],
function （ec） {
var myChart_Category = ec.init（document.getElementById（‘div_pieCategory’））；
var myChart_Bar = ec.init（document.getElementById（‘div_bar’））；
SetTestStatisticsByCategory（ec, myChart_Category）；
SetTestStatisticsByBeginTime（ec, myChart_Bar）；
//设置点击事件
var ecConfig = require（‘echarts/config’）；
myChart_Category.on（ecConfig.EVENT.PIE_SELECTED, function （param） {
var selected = param.selected;
//debugger;
var serie
serie = optionpie_category.series[0];
if （jQuery.inArray（true, selected[0]） > -1） {
for （var i = 0; i < serie.data.length; i++） {
if （selected[0][i]） {
$（“#hid_category”）。val（serie.data[i].name）；
GetTestList（serie.data[i].name）；
}
}
}
else {
$（“#hid_category”）。val（“”）；
}
}）
myChart_Bar.on（ecConfig.EVENT.CLICK, function （param） {
var selected = param;
var xAxis;
xAxis = optionpie_bar.xAxis[selected.seriesIndex];
for （var i = 0; i < xAxis.data.length; i++） {
if （i == selected.dataIndex） {
if （$（“#hid_date”）。val（） != xAxis.data[i]） {
$（“#hid_date”）。val（xAxis.data[i]）；
} else {
$（“#hid_date”）。val（“”）；
}
GetTestList（xAxis.data[i]）；
}
}
}）
}
）
2、使用jquery ajax获取数据并绑定：
//获取测试类型统计数据
function GetTestStatisticsByCategory（） {
$.ajax（{
type: “post”,
dataType: “text”, traditional: true,
data: { oper: “bycategory” },
url: AjaxUrl,
async: false,//表示同步执行
success: function （data, textStatus） {
if （data != null） {
if （data） {
datapie_category = eval（‘（' + data + ’）‘）；
}
else {
alert（“获取测试类型统计数据失败！”）；
}
}
},
complete: function （XMLHttpRequest, textStatus） { },
error: function （e） {
alert（“获取测试类型统计数据失败，请刷新页面重新加载！”）；
}
}）；
}
3、ashx后台代码：
组织好字符串返回就行。完全按照这个格式来。
public class test : IHttpHandler
{
public void ProcessRequest（HttpContext context）
{
context.Response.ContentType = “text/plain”;
string Test = CustomResponse.GetResponse（“lc”）；
string categroy = CustomResponse.GetResponse（“cl”）；
string oper = CustomResponse.GetResponse（“oper”）；
string condition = CustomResponse.GetResponse（“cd”）；
string id = CustomResponse.GetResponse（“id”）；
switch （oper）
{
case “bycategory”:
GetTestStatisticsByCategory（context）；//按照测试类型统计
break;
case “bystate”:
GetTestStatisticsByState（context）；//按照测试状态统计
break;
case “bybegintime”:
GetTestStatisticsByBeginTime（context）；//按照月份统计数据
break;
default:
break;
}
}
///
/// 按照测试类型统计
///
///
private void GetTestStatisticsByCategory（HttpContext context）
{
string returnvalue = “[{ value:33,name:’其他‘},
{ value:52,name:’测试类型1'},{ value:36,name:‘测试类型12'},
{ value:31,name:’测试类型222121'}]”;
context.htm = htm&（returnvalue）；
context.Response.End（）；
}
///
/// 按照测试状态统计
///
///
private void GetTestStatisticsByState（HttpContext context）
{
string returnvalue = “”;
context.htm = htm&（returnvalue）；
context.Response.End（）；
}
///
/// 按照月份统计
///
///
private void GetTestStatisticsByBeginTime（HttpContext context）
{
string returnvalue = “['2014-1','2014-2','2014-3','2013-4',
'2014-4','2013-5'];[2,10,25,1,8,1]”;
context.htm = htm&（returnvalue）；
context.Response.End（）；
}
public bool IsReusable
{
get
{
return false;
}
}
}
ECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。
你贴出来的链接这篇文章，正式介绍如何使用模块化加载ECharts。如果你不使用模块化，ECharts也提供相应的方法初始化。
首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本
然后引入主文件之后，就可以直接使用init()实例化了
var myChart = echarts.init({
// ...
});
最后补充一个官方API文档
http://echarts.baidu.com/doc/doc.html#引入ECharts
你把echarts.min.js
echarts-gl.min.js
这两个js文件从echarts官网下载下来，在同一个文件夹内新建一个HTML文件，把下面的代码复制进去。OK！
echarts
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
series: [{
type: 'scatter3D',
symbolSize: 50,
data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
itemStyle: {
opacity: 1
}
}]
})
首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本然后引入主文件之后，就可以直接使用init()实例化了var myChart = echarts.init({// ...}); ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 ECharts 提供大量常用的数据可视化图表，底层基于ZRender。
首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本然后引入主文件之后，就可以直接使用init()实例化了var myChart = echarts.init({// ...}); ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 ECharts 提供大量常用的数据可视化图表，底层基于ZRender。
第一步：配置maven的库
1、在本地新建一个文件夹，来存放maven需要的jar库。
2、修改maven配置文件settings.xml，D:\apache-maven-3.3.3\conf\settings.xml。使配置文件指向您刚才建的文件夹。
第二步：eclipse配置maven
1、打开cclipse，依次打开Windows-->Prefrences,点击Maven的右边的三角符号，以展开Maven的配置界面，
2、然后点击Maven下面的Installations选项，出现如下界面，请点击Add按钮
3、再后请选择您的maven安装路径，这里我的maven的安装目录为D:\apache-maven-3.3.3 ,选择你的maven安装目录，并点击确定, 之后可以点击Apply,点击OK，界面
4、再然后点击Maven下面的User Settings选项，出现如下界面，请您点击第二个Browse..按钮，选择您第一步配置的maven配置文件settings.xml。然后点击下面的Update Settings按钮，再点击下面的Apply按钮，点击ok就完成了。
第三步：测试maven是否安装成功
1、打开Eclipse，创建Maven项目。依次点击File-->New-->Maven Project ,请选中Create a simple project(skip archetype selection),之后点击Next按钮。
2、然后填写Group id和artifact id， Version默认，Packaging默认为jar,Name，Description选填，其他的不填，之后点击Finish按钮完成。
yAxis: [
{
type: 'value',
min: 0,
max: 900
}
]
其实可以的话，应该是
获取y轴最大数据max然后+50（随便，不加也可以）然后取整，在来个循环设成100，,50的倍数（10的倍数都可以，看个人喜好），不这样参差不齐y轴很难看的（因为一般默认是y轴最大值和最小值中间分成5块，不能整除看着碍眼）
获取y轴最小数据min然后-50（随便，不加也可以）同取整
yAxis: [
{
type: 'value',
min: ymin,
max: ymax
}
]