echarts3.6
1.<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="barMain" style="height:400px"></div> function loadEcharts(){ //初始化 var myChart = echarts.init(document.getElementById('barMain')); //指定图表的配置项和数据 var option = {
title：{},//标题
tooltip:{},//提示框
legend:{},
grid:{},
xAxis : [],//x轴
yAxis : [],//y轴
series : []//数据、echarts类型(曲、柱、饼)
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并 } }
2.例子
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title> </head>
<body>
<div id="barMain" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
);
function drawEcharts(ec){
loadEachatrs(ec);
//drawLine(ec);
}
function loadEachatrs(ec){
var myChart = ec.init(document.getElementById('barMain'));
var option = {
title : {//标题
text: '产品库存关系图',
subtext: '数据来自瞎编',
x: 'center',
align: 'right'
}, tooltip:{//鼠标悬浮在柱状图/曲线图上是否加载提示框
show: true
},
legend:{
data:["种类","物品"],
x: 'left',
y:30,
padding:[5,35,5,5]
},
grid:{//控制图形区域与图表容器之间的间隔，就是绘图区与id为barMain的div的占比http://www.mamicode.com/info-detail-1556089.html
"borderWidth":0,
top:100,
containLabel:true
},
xAxis : [
{
type : 'category',
name:"数据",
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel:{//加这个x轴显示字体是倾斜状的
interval:0,
rotate:-30
} }
],
yAxis : [
{
name: '个数',
type: 'value',
max: 50
}
],
series : [
{
"name":"种类",
"type":"line",//曲线图
"data":[5, 20, 40, 10, 10, 20], },{
"name":"物品",
"type":"bar",//柱状图
"data":[25, 20, 20, 20, 10, 20],
itemStyle:{normal:{label:{show:true,position:'top'}}}
}
]
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并 }
</script>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////////注释////////////////////////////////////////////////////////////////////////////////////
series 里面name的值要和legend里面data值一样，不然在实现点击legend时，图形不会出现点击消失点击显示的功能
例子三:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
); function drawEcharts(ec){
drawBar(ec);
drawLine(ec);
}
function drawBar(ec){
var myBarChart = ec.init(document.getElementById('barMain'));
var option = {
tooltip: {//提示功能
show: true },
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
} function drawLine(ec){
var myLineChart = ec.init(document.getElementById('lineMain'));//创建一个容器
var option2 = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {//提示框--->注释后鼠标放置曲线上时无弹窗
trigger: 'axis' },
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [//数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {//标记提示
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {//标识线
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
myLineChart.setOption(option2,true);
}
</script>
</body>
例子四
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="myChart" style="height:500px"></div>
<div id="lineMain" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
); function drawEcharts(ec){
InitBarChart(ec);
}
//柱状图
function InitBarChart(ec) {
var mychart = ec.init(document.getElementById("myChart"));
var option = null;
dataList = [
{ "总数":0,
"监测方法":"GPS监测"
},
{ "总数":100,
"监测方法":"地表裂缝监测"
},
{ "总数":100,
"监测方法":"全站仪地表位移监测"
},
{ "总数":100,
"监测方法":"地面沉降监测"
},
{ "总数":100,
"监测方法":"钻孔倾斜仪监测"
},
{ "总数":100,
"监测方法":"全自动倾斜仪监测"
},
{ "总数":100,
"监测方法":"气温"
},
{ "总数":100,
"监测方法":"天气"
},
{ "总数":100,
"监测方法":"雨量监测"
},
{ "总数":100,
"监测方法":"江河水位监测"
},
{ "总数":100,
"监测方法":"地下水位监测"
},
{ "总数":100,
"监测方法":"孔隙水压力监测"
},
{ "总数":100,
"监测方法":"岩土日含水量"
},
{ "总数":100,
"监测方法":"渗透力监测"
},
{ "总数":100,
"监测方法":"渗流量监测"
},
{ "总数":100,
"监测方法":"推力监测"
},
{ "总数":100,
"监测方法":"锚索测力计监测"
},
{ "总数":100,
"监测方法":"井水"
},
{ "总数":100,
"监测方法":"泉水"
},
{ "总数":100,
"监测方法":"墙裂"
},
{ "总数":100,
"监测方法":"地鼓"
},
{ "总数":100,
"监测方法":"次声"
},
{ "总数":100,
"监测方法":"泥位"
} ]; var names = [];
var values = [];
var total = 0;
var barW = 30;
var botM = 60;
var test ="http://echarts.baidu.com/option.html#title.link";
for (var i = 0;i < dataList.length;i++)
{
names.push(dataList[i]["监测方法"]);
values.push(dataList[i]["总数"]);
}
option = {
title: {
// show:false,//不显示标题,如果不想显示可以整个titl不写
text: "我是主标题",//主标题
subtext: "我是副标题",//副标题
link:test,//给主标题加超链接
x: "left",//主副标题在x轴左侧显示
sublink:test,//给副标题加超链接
//target:'self', //主标题超链接当前窗口打开
//target:'blank', //主标题超链接新窗口打开
//subtarget:'self', //副标题超链接当前窗口打开
//subtarget:'blank', //副标题超链接当前窗口打开
textStyle: {//主标题文字样式设置
color: '#1690cf',
fontSize: 14
},
subtextStyle: {//副标题文字样式设置
color: '#1690cf',
fontSize: 12
},
itemGap:10,//主副标题之间间距
padding: [20, 0, 0, 20],//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
top:50
},
legend: {//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
//data:['个数'],//series里面的name，如果有多条曲线可以把不同曲线的name写进去data:['name1','name2']
data: [{
name: '个数',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
},
}],
bottom: 10,
left: 'center'
},
tooltip: {//提示框组件
//trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
}, xAxis: [
{
type: 'category',
data: names,
splitLine: false,
axisLabel: {
//rotate: 45,//旋转角度
interval: 0,//强制显示所有标签
textStyle: {
fontSize: 12,
color: '#333',
fontFamily: "微软雅黑"
},
formatter: function (val) {
return val.split("").join("\n");
}
},
axisLine: {
//show:false
},
axisTick: {
//show:false
}
}
],
yAxis: [
{
type: 'value',
splitLine: true,
show: false
}
],
series: [
{
name: "个数",
type: "bar",
data: values,
barWidth: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#000'
}
},
color:"#7977da"//更改柱子颜色
/*color: function (params) {//给每个柱子设置不同的颜色
var colorList = ['#0bd1da', '#47c588', '#45ade2', '#e87c24', '#0f6fc6', '#7977da', '#fdce0f'];
return colorList[params.dataIndex];
}*/
}
}
}
],
//noDataLoadingOption: {
// text: "暂无数据",
// effect: "bubble",
// effectOption: {
// effect: {
// n:0
// }
// }
//},
grid: {
borderWidth: '0px',
left: 10,
right: 10,
top: 80,
bottom: 80
//x: 0,
//y: 0,
//x2: 0,
//y2:0
//y2:0
//left: '0%',
//right: '10%',
//containLabel:true
},//去掉外围边框
//axis: {
// axisLabel: {
// formatter: function (val) {
// return val.split("").join("\n");
// }
// }
//}
}; mychart.setOption(option);
}
</script>
</body>