各位觀眾老爺大家好既棺，歡迎大家收看由我給大家講解的web前端大講堂璃吧，今天給大家分享的是一個關(guān)于數(shù)據(jù)圖顯示的插件。那就是echarts ?數(shù)據(jù)圖
好啦蝌衔，廢話不多說了，先給大家看一下效果啊蝌蹂。
這個就是簡單的柱形圖噩斟。 代碼伺候上。
首先我們需要在觀望上下載我們所依賴的插件孤个。
然后我們把下載下來的echarts 文件引入到我們的html中剃允。
引入后，我們寫一個div 取一個id名稱齐鲤，叫main硅急，然后我們寫一個寬高600 -400。 接下來我們書寫js代碼佳遂。
// 基于準(zhǔn)備好的dom，初始化echarts實例
varmyChart=echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option={
title:{
text:'ECharts 入門示例'
},
tooltip:{},
legend:{
data:['銷量']
},
xAxis:{
data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis:{},
series:[{
name:'銷量',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表撒顿。
myChart.setOption(option);
我們把js代碼書寫完畢后丑罪，就可以運(yùn)行了。第一個圖表就這樣誕生了。
好吩屹，接下來給大家說一下跪另，我們?nèi)绾螘鴮戯瀳D。
接下來給大家說一下餅圖如何書寫煤搜。
我們的依賴和css還是老樣子免绿， 唯一需要改變的就是js代碼。
myChart.setOption({
series:[
{
name:'訪問來源',
type:'pie',
radius:'55%',
data:[
{value:235,name:'視頻廣告'},
{value:274,name:'聯(lián)盟廣告'},
{value:310,name:'郵件營銷'},
{value:335,name:'直接訪問'},
{value:400,name:'搜索引擎'}
]
}
]
})
實力化擦盾，編寫數(shù)據(jù)嘲驾，運(yùn)行后效果如下。
然后呢迹卢，我們接著寫
roseType:'angle'
而關(guān)于陰影的配置如下：
itemStyle:{
normal:{
// 陰影的大小
shadowBlur:200,
// 陰影水平方向上的偏移
shadowOffsetX:0,
// 陰影垂直方向上的偏移
shadowOffsetY:0,
// 陰影顏色
shadowColor:'rgba(0, 0, 0, 0.5)'
}
}
背景顏色 設(shè)置?
setOption({
backgroundColor:'#2c343c'
})
好啦辽故，關(guān)于這個插件的簡單的使用方法就介紹給大家了，如果想要更好的效果腐碱，小伙伴們可以直接去官網(wǎng)查看哦誊垢。
非常感謝大家！Ｖ⒓喂走！??
