<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts学习记录</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
var width;
var height;
var myChart;
$(function(){
//自适应设置
width = $(window).width();
height = $(window).height();
$("#mainBar").css("width",width-40);
$("#mainBar").css("height",height-40);
console.log(height);
setEcharts();
});
$(window).resize(function() {
width = $(window).width();
height = $(window).height();
$("#mainBar").css("width",width-40);
$("#mainBar").css("height",height-40);
});
function setEcharts(){
myChart = echarts.init(document.getElementById('mainBar'));
//自适应
window.onresize = myChart.resize;
myChart.setOption({
title: {
text: 'Temperature change in the future one week',
subtext: 'fictitious'
},
Legend: {
Data: [ 'evaporation', 'precipitation']
},
calculable: to true,
XAXIS: [
{
// Show : false, // shadow possession
type: 'category',
Data: [ "January", "February", "March", "April", "May", "June", "July" , 'August', 'September', May '10, ''11 months', '12 months '],
}
],
YAXIS: [
{
type:' value '
}
],
Series: [
{
name:' evaporation ',
type:' bar ',
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: 'precipitation',
type: 'bar',
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],
// top digital display PZR
ItemStyle: {
// rounded bar chart, hover effect, If only one number is set to all the four parameters described so much
emphasis: {
barBorderRadius: 30
},
Normal: {
// rounded bar chart, the initialization effect
barBorderRadius: [10, 10, 10, 10],
label: {
Show: to true, // show whether
textStyle: {
fontWeight: 'Bolder',
the fontSize: '12 is' ,
the fontFamily: 'Microsoft yahei',
}
}
}
}
}
]
});
}
</script>
<body>
<div the above mentioned id = "mainBar" style = "border: 1px Solid #ccc; padding: 10px;"> </ div>
<- tabbed introduced Eharts if you put the script tag references echarts placement head internal IE8! - browser error occurs, the solution is to move to the label inside the body (after). ->
<Script type = "text / JavaScript" the src = "http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"> </ Script>
<Script>
< / Script>
</ body>
</ HTML>