echart 参数 vue配置 图文展示

https://blog.csdn.net/she_lover/article/details/51448967

https://blog.csdn.net/n_meng/article/details/78593743

以上博客写的很清楚，但是对应找属性和方法不是很好找，最近写项目用到echart正好记录以下。

一.npm安装echarts

npm install echarts --save

二.在mian.js里面导入echarts

import echart from 'echarts'

  //挂载echart

  Vue.prototype.$echarts = echart

三.使用echart（目前是父组件引用子组件，具体的参数配置和使用都在子组件里面编写）

1.自定义的子组件1html代码（barechart.vue）

 <template>
     <div id="main1" style="height:300px;"></div>
 </template>

2.自定义的子组件1内容(直接代码了，该加注释的都加了)

 mounted () {
       this.$nextTick(function(){
           this.drawbarechart();
       })
 },

 methods: {
         drawbarechart() {
             let _this = this;
             this.charts = this.$echarts.init(document.getElementById('main1'))
             this.charts.setOption({
                 title:{     //设置标题的样式
                     padding:[0,15],
                     text:_this.titletext,
                     // text:'标题1',
                     // x:'center',
                     textStyle:{
                         fontSize:14,
                         color:'#333',
                     }
                 },
                 tooltip:{   //设置悬浮框的样式
                     trigger:'axis',
                     confine:true,
                     axisPointer:{
                         type:'shadow'
                     }
                 },
                 grid:{  //设置canvas构造内容的边距
                     left:'4%',
                     right:'12%',
                     bottom:'3%',
                     containLabel:true
                 },
                 xAxis:{ //X轴参数配置
                     type:'category',
                     name:_this.xAxisname,
                     data:_this.xAxisdata,
                     // axisLine:{       // 坐标轴线
                     //     show:true,   // 默认显示，属性show控制显示与否
                     //     lineStyle:{  // 属性lineStyle控制线条样式
                     //         color:'#ddd'
                     //     }
                     // },
                     // axisLabel:{
                     //     show:true,
                     //     textStyle:{
                     //         color:'#333'
                     //     }
                     // },
                     splitLine:{show:false},    // 分隔线
                     splitArea:{         // 分隔区域
                         show:true,      // 默认不显示，属性show控制显示与否
                         areaStyle:{     // 属性areaStyle（详见areaStyle）控制区域样式
                             color:[
                                 'rgba(100,100,100,0.03)',
                                 'rgba(100,100,100,0)'
                             ]
                         }
                     },
                     axisTick:{  //轴上的齿度是否显示
                         alignWithLabel:true,
                         show:false
                     }
                 },
                 yAxis:{     //X轴参数配置
                     type:'value',
                     name:_this.yAxisname,

                     // splitLine:{show: false},//去除网格线

                     axisTick:{  //轴上的齿度是否显示
                         show:false
                     }
                 },
                 series:[    //柱形的参数配置
                     {
                         name:_this.seriesname,
                         type:'bar',
                         barWidth: '25',
                         data:_this.seriesdata,

                         itemStyle:{
                             normal:{
                                 barBorderRadius:[5, 5, 5, 5],
                                 color:'rgb(72,118,254)',
                                 label:{
                                     show:true,
                                     position:'top',
                                     textStyle:{
                                         color:'rgb(72,118,254)'
                                     }
                                 }
                             }
                         }
                     }
                 ]
             })
         }
     },

3.以下是自定义子组件2，折线图（lineechart.vue）

 <template>
     <div id="main2" style="height:300px;background:#ffffff"></div>
 </template>

4.自定义的子组件2内容(直接代码了，该加注释的都加了)

 mounted () {         this.$nextTick(function(){
             this.drawlineechart();
         })

     },
     methods: {
         drawlineechart() {
             let _this = this;
             this.charts = this.$echarts.init(document.getElementById('main2'))
             this.charts.setOption({
                 title:{
                     text:_this.titletext,
                     // text:'标题2',
                     padding:[5,15],
                     // x:'center',
                     textStyle:{
                         fontSize:14,
                         color:'#333'
                     }
                 },
                 tooltip:{
                     trigger:'axis',
                 },
                 grid:{
                     left:'2%',
                     right:'12%',
                     bottom:'3%',
                     containLabel:true
                 },
                 xAxis:{
                     type:'category',
                     name:_this.xAxisname,
                     splitLine:{show:false},
                     // boundaryGap:false,
                     data:_this.xAxisdata,
                     splitArea:{
                         show:true,
                         areaStyle:{
                             color:[
                                 'rgba(100,100,100,0.03)',
                                 'rgba(100,100,100,0)'
                             ]
                         }
                     },

                     // axisLine:{       // 坐标轴线
                     //     show:true,   // 默认显示，属性show控制显示与否
                     //     lineStyle:{  // 属性lineStyle控制线条样式
                     //         color:'#111'
                     //     }
                     // },
                     // axisLabel:{
                     //     show:true,
                     //     interval:0,     //X轴字段全部显示出来，默认不显示完可以把该项去掉
                     //     textStyle:{
                     //         color:'#111'
                     //     }
                     // },
                     splitLine:{show:false},    // 分隔线
                     // splitArea:{         // 分隔区域
                     //     show:true,      // 默认不显示，属性show控制显示与否
                     //     areaStyle:{     // 属性areaStyle（详见areaStyle）控制区域样式
                     //         color:[
                     //             'rgba(100,100,100,0.03)',
                     //             'rgba(100,100,100,0)'
                     //         ]
                     //     }
                     // },
                     axisTick:{
                         show:false
                     }
                 },
                 yAxis:{
                     type:'value',
                     name:_this.yAxisname,

                     // axisLine:{       // 坐标轴线
                     //     show:true,   // 默认显示，属性show控制显示与否
                     //     lineStyle:{  // 属性lineStyle控制线条样式
                     //         color:'#666'
                     //     }
                     // },

                     // splitLine:{show: false},//去除网格线

                     axisLabel:{
                         formatter:'{value}(%)'
                     },
                     axisTick:{
                         show:false
                     }
                 },
                 series:[
                     {
                         name:_this.seriesname,
                         type:'line',

                         symbol:'circle',    //折线图拐点

                         symbolSize:10,
                         showAllSymbol:true,
                         data:_this.seriesdata,

                         itemStyle:{
                             normal:{
                                 color:'rgb(72,118,254)',
                                 label:{
                                     show:true,
                                     position:'top',
                                     formatter:'{c}(%)',     //在series加上单位
                                     textStyle:{
                                         color:'rgb(72,118,254)'
                                     }
                                 }
                             }
                         }
                     },

                 ]
             })
         }
     },

以上，关于echart各种常用的参数，就是这次的主要内容。

稍微更新一下：目前需求有跟着屏幕大小自动去刷新echart宽高，试了多种方式，最终解决了单个页面多个echart图自适应宽高问题：

 window.addEventListener('resize', ()=> {
                 this.charts.resize();
             })

加在setOption后面即可。

window.addEventListener('resize', ()=> {

this.charts.resize();

})