再也不怕图表展示了—— vue中echarts两种使用方式详解

一、直接使用原生echarts

通过npm直接安装charts，然后在组件中使用，api和使用保持和echarts文档中保持一致

• 使用步骤

  1. 安装echarts

     npm install --save-dev echarts

  2. main.js中引入并绑定到Vue原型

     import echarts from 'echarts'

     Vue.prototype.$echarts = echarts

  3. 组件中直接使用

     <template>
       	<!--页面上定义div,并指定ID，设定大小--->
           <div id="containerh" style="min-width:200px;height:300px;width: 380px;margin-top: -320px;margin-left: 1040px;"></div>
     </template>
     
     <script>
     	export default {
            
             data() {
            
               return {
            
                 
               }
             },
         		mounted() {
            
               this.initChart()
             },
         		method: {
            
               initChart() {
            
                 // 获取定义的div对象
                 let myChart = this.$echarts.init(document.getElementById('containerlist'))
                 		// 设置图表对象，可以在这里设置不同的图表对象，具体可以根据echarts官方文档，这里可以在前面获取数据，这里直接setOption，可以将数据直接渲染到图表
                     myChart.setOption({
            
                         title: {
            
                         },
                         tooltip: {
            
                             trigger: 'item',
                             formatter: '{ a } <br/> {b} : {c}%'
                         },
                         toolbox: {
            
                             feature: {
            
                                 dataView: {
            readOnly: false},
                                 restore: {
            },
                                 saveAsImage: {
            }
                             }
                         },
                         legend: {
            
                             data: ['展现', '点击', '访问', '咨询', '订单']
                         },
                         calculable: true,
                         series: [
                             {
            
                                 name: '漏斗图',
                                 type: 'funnel',
                                 left: '10%',
                                 top: 60,
                                 // x2: 80,
                                 bottom: 60,
                                 width: '80%',
                                 // height: {totalHeight} - y - y2,
                                 min: 0,
                                 max: 100,
                                 // minSize: '0%',
                                 // maxSize: '100%',
                                 minSize: '20%',              // 每一块的最小宽度
                                 maxSize: '90%',               // 每一块的最大快递   一次去除掉尖角
                                 sort: 'descending',
                                 gap: 10,                // 每一块之间的间隔
                                  label: {
                        // 设置每一块的名字是显示在图里面还是外面
                                      show: true,
                                      position: 'inside'
                                  },
                                 labelLine: {
            
                                     length: 100,             // 设置每一块的名字前面的线的长度
                                     lineStyle: {
            
                                         width: 1,         // 设置每一块的名字前面的线的宽度
                                         type: 'solid'    // 设置每一块的名字前面的线的类型
                                     }
                                 },
                                 itemStyle: {
            
                                     normal: {
            
                                         borderColor: '#fff',        // 每一块的边框颜色
                                         borderWidth: 0,             // 每一块边框的宽度
                                         shadowBlur: 50,             // 整个外面的阴影厚度
                                         shadowOffsetX