Q:
E-chart隨瀏覽器變化而變化。
//chart表隨窗口變化
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
}
一、初步
1.1、引入echart
<script>引入e-chart.js文件
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script></head></html>
1.2、創建echart容器：
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div></body>
1.3、js代碼
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script></body></html>
二、進階
2.1、X、Y軸、數據、樣式等都包含在OPTION中
var option = {
title: {},
tooltip: {},
legend: { },
xAxis: {},
yAxis: {},
series: [{
}]
};
2.2.1、圖標標題title
title: {
text: XXXX, //圖標標題
subtext:xxxx, //副標題
show:false/true, //標題是否顯示
x: 數字or center 、left、right //水平位置
y: top、bottom、center//垂直位置
textAlign: null, //水平對齊方式
Textstyle: { //標題文本樣式
fontSize: 18,//字體大小
fontWeight: ‘bolder’,//字體
color: ‘#333’//顏色
},
padding: 2,//標題內邊距
BackgroundColor：//標題背景色
borderColor：//線
borderWidth：//線
borderRadius：//圓角
}
2.2.2 圖例Legend
legend:圖例組件展現了不同系列的標記(symbol)，顏色和名字；
show:false/true //是否顯示
data:[] //圖例的數據數組;
2.2.3提示框tooltip
tooltip:{
trigger: axis或item, // 一組或單條
ShowDelay:20,//顯示延遲
HideDelay:100//隱藏延遲
axisPointer:{
type:’line’或’shadow’ //
linestyle:{}
shadowStyle:{}
}
}
2.2.4工具框toolbox
toolbox: {
show: true,
orient: 'vertical'， //佈局默認水平horizontal，'vertical'垂直
x: //下面四個調整顯示位置
Y: //
left: 'right',
top: 'center',
feature: {
mark: {show: true}, //無視
dataView: {show: true, readOnly: false}, //數據數字形式顯示
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},//轉換數據顯示方式，柱狀轉折現
restore: {show: true}, //刷新
saveAsImage: {show: true} //保存爲圖片
}
},
2.2.5、X軸
xAxis: [
{
type: 'category', //有value和'category' 分別是數值和品種
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
2.2.6、y軸
yAxis: [
{
type: 'value', //類型，連續數值用value
name: '水量', //顯示在y軸上的名字
min: 0, //最大最小量程
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml' //y軸數值單位
}
},
{
type: 'value',
name: '溫度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
2.2.7 grid
grid用來調整圖標位置，左右上下邊距等屬性。
grid: {
x: 45,
y: 60,
x2: 15,
y2: 20,
borderWidth: 1
},