版权声明: https://blog.csdn.net/qq_40515156/article/details/84446024
一次分享会上知道了Echarts这个插件,刚好需要用到就去了解了一下,可以很方便地生成各种图表,在这里简单分享一下如何生成饼状图和柱状图,如果你想要更好的呈现你的图,可以去Echarts官网配置项看如何修改。
1.首先你需要去Echarts下载页面下载需要的版本,我使用的是普通版
2.引入js文件
<script src="../build/js/echarts.common.min.js"></script>
3.构建一个容器呈现
<div id="main" style="width: 600px;height: 400px;">
</div>
4.柱状图与圆饼图的区别主要在于xAxis和yAxis这两个属性,这里直接贴出两个的代码
4.1柱状图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title:{
text:'1.柱状图实例'
},
tooltip:{},
legend:{
data:['张杰单曲循环量']
},
xAxis:{
data:["最美的太阳","明天过后","他不懂","逆战","我们都一样","无药可救"]
},
yAxis:{
},
series:[{
name:'张杰单曲循环量',
type:'bar',
data:[15,20,10,8,23,40]
}]
};
//使用配置项显示图表
myChart.setOption(option);
效果图如下:
4.2圆饼图
var myCharts = echarts.init(document.getElementById('main'));
var option = {
//添加背景色
backgroundColor:'blue',
legend:{
data:['计算机类专业就业比例']
},
series : [
{
name: '计算机类专业就业比例',
type: 'pie',
radius: '55%',
roseType:'angel',//变为南丁格尔图
data:[
{value:235, name:'计算机科学与技术'},
{value:274, name:'信息管理'},
{value:260, name:'通信工程'},
{value:250, name:'物联网工程'}
],
itemStyle:{
//添加阴影
emphasis:{
shadowBlur:300,
shadowColor: 'red'
}
},
}
],
};
myCharts.setOption(option);
效果图如下:
完整代码文件,默认需要积分,只想分享一下,所以需要的留言就好