vue中添加echarts

最新推荐文章于 2025-07-10 12:48:26 发布

转载最新推荐文章于 2025-07-10 12:48:26 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/colorful-paopao1/p/9796111.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue项目中使用ECharts图表库的两种方法：全局引入和按需加载。通过实例展示了如何在组件中初始化图表，设置选项，以及响应窗口大小变化进行图表调整。

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

方法一：全局引入echarts

步骤：

1、全局安装 echarts依赖。 cnpm install echarts -- save

2、引入echarts模块，在Vue项目的main.js中引入echarts模块，即是写入如下代码：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在需要的组件，如index.vue中

<template>
     <div class="echart-box" id="E_zkcl" style="width: 380px; 
       height:330px"></div>
</template>
<script>
   export default {
     data(){
        return(){
            }
       },
       methods: {
            drawLine(){
       let myChart1 = this.$echarts.init(document.getElementById('E_zkcl'))

         }
 myChart1.setOption({
           color:['#4ED8DA'],
           title : {
                text: '每月检修统计',
                x:15,
                y:15,
                textStyle:{
                  fontSize: 16,
                  fontWeight: 'bolder',
                  color: '#333'
                }
            },
            tooltip : {
                trigger: 'axis'
            },
           grid:{
              borderWidth:0,
              x:'10%',
              y:'20%',
              x2:'5%',
              y2:'15%',
            },
            calculable : true,
            xAxis : [
                {
                 type : 'category',
                 axisLine:{
                      show:false,
                  },
                  splitLine:{
                      show:false,  //不显示分割线
                  },
                  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis : [
                {
                  type : 'value',
              axisLine:{
                      show:false,
                  }
                }
            ],
            series : [
                {
                    name:'数量',
                    type:'bar',
                    data:[2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3],
                }
            ]
        });

//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
myChart.resize();
//myChart1.resize(); //若有多个图表变动，可多写

}

         mounted(){
           this.drawLine();
            }
  
}
</script>

方法二：按需引入

转载于:https://www.cnblogs.com/colorful-paopao1/p/9796111.html