DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="echarts.min.js">script>
head>
<body>
<div id="main" style="width: 900px;height:400px;">div>
<button id="btn">clcikbutton>
<script>
/*toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},*/
var option = {
tooltip : {
trigger: 'axis'
},
grid:{
x: 0,
x2: 150
},
calculable : true,
legend: {
data:['蒸发量','降水量','平均温度','平均温度2']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
boundaryGap:[0,'10%'],
position:"right",
offset:0,
type : 'value',
name : '水量',
splitLine:{
show:false
},
axisLabel : {
formatter: '{value} ml'
},
axisTick:{
inside:true
}
},
{
boundaryGap:[0,'10%'],
position:"right",
offset:50,
type : 'value',
name : '温度',
splitLine:{
show:false
},
axisLabel : {
formatter: '{value} °C'
}
},
{
boundaryGap:[0,'10%'],
position:"right",
offset:100,
type: 'value',
name : '温度2',
splitLine:{
show:false
},
axisLabel:{
formatter: '{value} °C'
}
}
],
series : [
{
name:'蒸发量',
type:'bar',
yAxisIndex: 0,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
yAxisIndex: 0,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]
},
,
{
name:'平均温度2',
type:'line',
yAxisIndex: 2,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
var option2 = {
tooltip : {
trigger: 'axis'
},
grid:{
x: 0,
x2: 150
},
calculable : true,
legend: {
data:['降水量','平均温度']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
boundaryGap:[0,'10%'],
position:"right",
offset:0,
type : 'value',
name : '水量',
splitLine:{
show:false
},
axisLabel : {
formatter: '{value} ml'
},
axisTick:{
inside:true
}
},
{
boundaryGap:[0,'10%'],
position:"right",
offset:50,
type : 'value',
name : '温度',
splitLine:{
show:false
},
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'降水量',
type:'bar',
yAxisIndex: 0,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
var offOn=true;
document.querySelector("#btn").onclick=function(){
if(offOn){
myChart.setOption(option2,true);
}else{
myChart.setOption(option,true);
}
offOn=!offOn;
}
script>
body>
html>
在series有个柱间距的属性barGap，设置-100%可以和别的柱重合。
barGap -100% 就可以当成背景 可以使用在堆积柱状图里的总数里
formatter:function(params){ //数据单位格式化 var relVal = params[0].name; //x轴名称 for (var i = 0, l = params.length; i < l; i++) { relVal += '
' + params[i].seriesName + ' : ' + params[i].value+"%"; } return relVal; } formatter: "{b}
{a} : {c}分" //数据格式化，{b}x轴名称，{a}series的name，{c}value params返回当前格式化文本的所属对象。很有用方法 图例: legend selectedMode:false 关闭对图例的操作
- formatter:function(params){ //数据单位格式化
- var relVal = params[0].name; //x轴名称
- for (var i = 0, l = params.length; i < l; i++) {
- relVal += '
' + params[i].seriesName + ' : ' + params[i].value+"%"; - }
- return relVal;
- }
- formatter: "{b}
{a} : {c}分" //数据格式化，{b}x轴名称，{a}series的name，{c}value