内裤总动员之echarts插件 数据图显示

各位观众老爷大家好，欢迎大家收看由我给大家讲解的web前端大讲堂，今天给大家分享的是一个关于数据图显示的插件。那就是echarts  数据图

---

好啦，废话不多说了，先给大家看一下效果啊。

柱形图

这个就是简单的柱形图。 代码伺候上。

首先我们需要在观望上下载我们所依赖的插件。

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'

})

好啦，关于这个插件的简单的使用方法就介绍给大家了，如果想要更好的效果，小伙伴们可以直接去官网查看哦。

非常感谢大家！！！🙏