各位观众老爷大家好，欢迎大家收看由我给大家讲解的web前端大讲堂，今天给大家分享的是一个关于数据图显示的插件。那就是echarts 数据图
好啦，废话不多说了，先给大家看一下效果啊。
这个就是简单的柱形图。 代码伺候上。
首先我们需要在观望上下载我们所依赖的插件。
然后我们把下载下来的echarts 文件引入到我们的html中。
引入后，我们写一个div 取一个id名称，叫main，然后我们写一个宽高600 -400。 接下来我们书写js代码。
// 基于准备好的dom，初始化echarts实例
varmyChart=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);
我们把js代码书写完毕后，就可以运行了。第一个图表就这样诞生了。
好，接下来给大家说一下，我们如何书写饼图。
接下来给大家说一下饼图如何书写。
我们的依赖和css还是老样子， 唯一需要改变的就是js代码。
myChart.setOption({
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
data:[
{value:235,name:'视频广告'},
{value:274,name:'联盟广告'},
{value:310,name:'邮件营销'},
{value:335,name:'直接访问'},
{value:400,name:'搜索引擎'}
]
}
]
})
实力化，编写数据，运行后效果如下。
然后呢，我们接着写
roseType:'angle'
而关于阴影的配置如下：
itemStyle:{
normal:{
// 阴影的大小
shadowBlur:200,
// 阴影水平方向上的偏移
shadowOffsetX:0,
// 阴影垂直方向上的偏移
shadowOffsetY:0,
// 阴影颜色
shadowColor:'rgba(0, 0, 0, 0.5)'
}
}
背景颜色 设置
setOption({
backgroundColor:'#2c343c'
})
好啦，关于这个插件的简单的使用方法就介绍给大家了，如果想要更好的效果，小伙伴们可以直接去官网查看哦。
非常感谢大家！！！🙏
