echarts：主要配置信息
安裝命令
npm install echarts --save
引入echarts
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9jVjabKK-1574069940512)(C:\Users\Administrator\Desktop\捕獲.PNG)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lfL6mMWi-1574069940515)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1574069220039.png)]
餅圖沒有 x ，y軸
title：標題 在{}內書寫樣式
title:{
text:'ECharts 數據統計',
樣式：
color：'red',
標題居中
x:'center',
fontWeight:'800',
},
tooltip：點擊時提示信息
tooltip:{
textstyle：提示內容顏色位置
textStyle:{
align:'right',
color:'blue'
},
}，
legend：顯示圖形比例。
圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
legend:{
data:['來源'],
align:'right',
type:'plain',
x:'right',
// borderColor:'#3333',
// backgroundColor: 'blue',
// width:'800',
// height:'800'
},
series：系列列表。通過 type 決定圖表類型
series: [{
//系列名稱，用於tooltip的顯示，legend 的圖例篩選，
name: '累計活動數',
//line 是折現圖 bar條形柱狀圖 pie 餅圖
type: 'line',//系列類型
stack: '總量',//數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加。
yAxisIndex:0,//使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。
data: sumArray//二位數組，
sumArray[i]表示在這一個座標裏有多少個柱狀圖，sumArray[i]裏的數組長度表示X軸有多少座標（這是我自己使用看到的效果，文檔裏還有別的用法）
}, {
name: '新增活動數',
type: 'bar',
animation: true,
yAxisIndex:0,
data: allWeekArray
}]
toolbox: 工具欄,內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具
toolbox: {
各工具配置項
feature: {
dataView: {
數據視圖工具，可以展現當前圖表所用的數據，編輯後可以動態更新。
show: true,//是否顯示組件。
readOnly: false
},
magicType:{
//動態類型切換
示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
show:true,
type:['line','bar']
},
restore: {//配置項還原。
show: true
},
saveAsImage: {//保存爲圖片。
show: true
}
}
}
代碼案例：
script type="text/javascript">
//指定圖標的配置和數據
var option = {
title:標題
title:{
text:內容
text:'ECharts 數據統計',
樣式：
color：'red',
標題居中
x:'center',
fontWeight:'800',
},
toolbox:{
feature: {//各工具配置項。
dataView: {//數據視圖工具，可以展現當前圖表所用的數據，編輯後可以動態更新。
show: true,//是否顯示組件。
readOnly: false
},
magicType:{//動態類型切換 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
show:true,
type:['line','bar']
},
restore: {//配置項還原。
show: true
},
saveAsImage: {//保存爲圖片。
show: true
}
}
}，
tooltip:{
textstyle：提示內容顏色位置
textStyle:{
align:'right',
color:'blue'
},
}，
圖形比例顯示
legend:{
data:['用戶來源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
決定y軸的方向
position:'right'
},
series:[{
name:'訪問量',
type:控制類型 line 是折現圖 bar條形柱狀圖 pie 餅圖
type:'line',
data:[500,200,360,100]
}]
};
//初始化echarts實例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置項和數據顯示圖表
myChart.setOption(option);
</script>
echarts vue 完整案例代碼
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px',fontSize:'20px'}"></div>
<div id="myChart2" :style="{width: '300px', height: '300px'}"></div>
<div id="myChart3" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
mounted(){
var option = {
title:{
text:'數據統計',
x:'center',
fontWeight:'800',
textStyle:{
color:"red",
fontStyle:'italic',
borderColor:'blue',
padding:10,
textAlign:'center',
},
},
tooltip:{
textStyle:{
align:'center',
color:'blue'
},
trigger:'item',
},
legend:{
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'訪問量',
type:'bar',
data:[500,200,360,100]
}]
};
//初始化echarts實例
var myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption(option);
// loading加載
// myChart.showLoading()
// loading結束時間
setTimeout(function(){
myChart.hideLoading();
},5000)
//使用制定的配置項和數據顯示圖表
var option2 = {
title:{
text:'ECharts 數據統計',
textAlign:'',
x:'center',
textStyle:{
textAlign:'center',
}
},
tooltip:{
textStyle:{
align:'center',
color:'blue',
fontSize:"20"
},
// trigger:'axis',
},
series:[{
name:'訪問量',
type:'pie',
radius:'50%',
data:[
{value:500,name:'年輕人'},
{value:200,name:'青年人'},
{value:360,name:'少年'},
{value:100,name:'少兒'}
]
}]
};
var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
//使用制定的配置項和數據顯示圖表
myChart2.setOption(option2);
}
}
</script>
<style lang="less" scoped>
div{
font-size: 20px;
}
</style>