vue echart图的的使用_echart在程序中需要使用$(this).val()获得主题的名称,则必须要引入什么文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qxq54321/article/details/108801637

本文介绍了如何在Vue项目中使用ECharts，从安装、引入到在组件中初始化并展示图表，详细解析了ECharts图的生命周期与初始化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装echarts

 npm install echarts --save

二、引入

在main.js中引入

// 引入echarts图
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、在组件中使用

1.引入

// vue文件中引入echarts工具
    let echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/line');
    // 以下的组件按需引入
    require('echarts/lib/component/tooltip');   // tooltip组件
    require('echarts/lib/component/title');   //  title组件
    require('echarts/lib/component/legend');  // legend组件

2.使用

<!-- 折线图 -->
                
                  <div class='table-box'>
                    <div class="table-title" style="margin-bottom: 0px;text-align:centre">集团人员资质统计</div>
                    <div id="myChart" style="width: 100%; height: calc(100% - 32px);"></div>
                  </div>

3.在mounted方法中初始化，因为echarts图需要挂载在页面元素上，需要在页面渲染后再初始化

mounted() {

// 初始化echarts图

this.queryEchartsData();

4.方法

			// 查询柱状图所需要的的数据
              queryEchartsData() {
                this.nameArr = [];
                      this.overdueArr  = [];
                      this.noOverdueArr  = [];
                  statisticsAPI.queryEcharts ().then( res => {
                    for (var i = 0;i< res.data.length;i++ ) {
                      this.nameArr.push(res.data[i].certficateName);
                      this.overdueArr.push(res.data[i].overdue);
                      this.noOverdueArr.push(res.data[i].nooverdue);
                    }
                    this.chart();
                  }).catch()
              },

              // 初始化折线图
              chart() {
                let myChart = echarts.init(document.getElementById('myChart'));
                var xAxisData = this.nameArr;
                // 未过期
                var data3 =this.noOverdueArr
                // 已过期
                var data4 = this.overdueArr;            
              let option = option = {
                 // backgroundColor: '#eee',
                  legend: {
                    data: [ '未过期', '已过期'],
                    left: 10
                  },
                  brush: {
                    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                    xAxisIndex: 0
                  },
                  toolbox: {
                    feature: {
                      magicType: {
                        type: ['stack', 'tiled']
                      },
                      dataView: {}
                    }
                  },
                  tooltip: {},
                  xAxis: {
                    data: xAxisData,
                    name: 'X Axis',
                    axisLine: {
                      onZero: true
                    },
                    splitLine: {
                      show: false
                    },
                    splitArea: {
                      show: false
                    }
                  },
                  yAxis: {
                    splitArea: {
                      show: false
                    }
                  },
                  grid: {
                    left: 100
                  },
                  series: [{
                      name: '未过期',
                      type: 'bar',
                      stack: 'two',
                     // emphasis: emphasisStyle,
                      label: {
                          show: true,
                          // 居中在柱状图里面展示
                          position: 'inside',
                          formatter:function(param){
                            
                            if(param.value !=0){
                                return param.value;
                            } else {
                              return ""
                            }
                           
                        },
                      },
                      itemStyle : {
                        normal: { 
                          // 设置柱形图颜色
                           color: '#00aaee', 
                        }
                      },
                      data: data3
                    },
                    {
                      name: '已过期',
                      type: 'bar',
                      stack: 'two',
                     // emphasis: emphasisStyle,
                      label: {
                          show: true,
                          position: 'inside',
                          formatter:function(param){
                           
                            if(param.value !=0){
                                return param.value;
                            } else {
                              return ""
                            }
                           
                        },
                      },
                       itemStyle : {
                        normal: { 
                          // 设置柱形图颜色
                           color: '#ff6600 ', 
                        }
                      },
                      data: data4
                    }
                  ]
                };

                myChart.setOption(option);
                // 根据窗口大小调整曲线大小
                window.onresize = myChart.resize;
              },