<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:800px;width:1000px;"></div>
<!-- ECharts单文件引入 -->
<script src="./build/dist/echarts.js"></script>
<script type="text/javascript">
var timeTicket;
// 路径配置
require.config({
paths: {
echarts: './build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
'echarts/chart/line' ,'echarts/chart/wordCloud' ,// 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量','最低气温','最高气温']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category',
position: 'bottom',
boundaryGap: true,
axisLine : { // 轴线
show: true,
lineStyle: {
color: 'green',
type: 'solid',
width: 2
}
},
axisTick : { // 轴标记
show:true,
length: 10,
lineStyle: {
color: 'red',
type: 'solid',
width: 2
}
},
axisLabel : {
show:true,
interval: 'auto', // {number}
rotate: 45,
margin: 8,
formatter: '{value}月',
textStyle: {
color: 'blue',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
}
},
splitLine : {
show:true,
lineStyle: {
color: '#483d8b',
type: 'dashed',
width: 1
}
},
splitArea : {
show: true,
areaStyle:{
color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
}
},
data : [
'1','2','3','4','5',
{
value:'6',
textStyle: {
color: 'red',
fontSize: 30,
fontStyle: 'normal',
fontWeight: 'bold'
}
},
'7','8','9','10','11','12'
]
},
{
type : 'category',
data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
],
yAxis : [
{
type : 'value',
position: 'left',
//min: 0,
//max: 300,
//splitNumber: 5,
boundaryGap: [0,0.1],
axisLine : { // 轴线
show: true,
lineStyle: {
color: 'red',
type: 'dashed',
width: 2
}
},
axisTick : { // 轴标记
show:true,
length: 10,
lineStyle: {
color: 'green',
type: 'solid',
width: 2
}
},
axisLabel : {
show:true,
interval: 'auto', // {number}
rotate: -45,
margin: 18,
formatter: '{value} ml', // Template formatter!
textStyle: {
color: '#1e90ff',
fontFamily: 'verdana',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'bold'
}
},
splitLine : {
show:true,
lineStyle: {
color: '#483d8b',
type: 'dotted',
width: 2
}
},
splitArea : {
show: true,
areaStyle:{
color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
}
}
},
{
type : 'value',
splitNumber: 10,
axisLabel : {
formatter: function (value) {
// Function formatter
return value + ' °C'
}
},
splitLine : {
show: false
}
}
],
series : [
{
name: '蒸发量',
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: '降水量',
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]
},
{
name:'最低气温',
type: 'line',
yAxisIndex: 1,
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]
},
{
name:'最高气温',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>
require对应名称说明
折线(面积)图 line
柱状(条形)图 bar
散点(气泡)图 scatter
K线图 candlestick
饼(圆环)图 pie
雷达(面积)图 radar
和弦图 chord
力导向布局图 fd chart
地图 map
仪表盘 gauges
漏斗图 funnels
热力图 heatmap
事件河流图 eventriver
韦恩图 venn
矩形树图 treemap
树图 tree
字符云 wordcloud
混搭 combinations
组件 components