Echarts图表的使用

版权声明： 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);

效果图如下：

完整代码文件，默认需要积分，只想分享一下，所以需要的留言就好