记录使用图表

最新推荐文章于 2024-08-15 18:19:19 发布

hddlsj

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量149

点赞数 1

文章标签：前端 javascript vue.js echarts vscode

本文链接：https://blog.csdn.net/hddlsj/article/details/125454008

版权

简单记录一下vue项目使用echarts

1. npm下载

npm install echarts --save

2.main.js 全局引用

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

3. 在vue 里面使用

<template>
   <div>
    <div id="box" ref="text"></div>

   </div>
</template>

<script>
import  * as  echarts from 'echarts'
//  let echarts = require("echarts/lib/echarts");
//   require("echarts/lib/chart/bar");//柱状图

  export default{
    data() {
      return {
        key: ''
      }
    },
       mounted(){
          this.initcommon()
       },
      
      methods: {
        initcommon(){
       const myChart =echarts.init(this.$refs.text)
        var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

        myChart.setOption(option);
          window.addEventListener('resize',()=>{
             myChart.resize();
          })
          
        }
      },

  }

</script>


<style>
   #box{
    display: flex;
     flex: 1;
     margin: 50px;
     width: 50%;
     height: 30vh;
   }
</style>

4效果图