2022/09/30 echarts 简单绘图折线图

伊格鲁

已于 2022-09-30 09:55:01 修改

阅读量351

点赞数

文章标签： echarts vue.js javascript

于 2022-09-30 09:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_43754182/article/details/127118138

版权

该博客展示了如何在Vue项目中集成Echarts库，通过在main.js中引入并注册Echarts，然后在组件的mounted生命周期钩子中初始化图表。代码创建了一个无边框的300x300像素的区域，用于展示一条平滑的紫色填充区域的线性图，线宽为0，数据为一系列数值，且x轴和y轴不显示。

摘要由CSDN通过智能技术生成

在这里插入图片描述
代码：
（先安装echarts，在main.js中引入并注册进prototype）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import * as echarts from 'echarts'
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用：

<template>
   <div>
      <el-card shadow="always">
        123
        <div id="xuanwo">

        </div>
      </el-card>
   </div>
</template>

<script>

export default {
  name: 'TopView',
  components: {
  },
  mounted(){
    const chartDom = document.getElementById('xuanwo');
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      xAxis:{
        type:'category',
        show:false,
        boundaryGap:false
      },
      yAxis:{
        show:false,
      },
      series:[{
        type:'line',
        data:[620,432,220,534,790,430,220,320,532,320,834,690,530,220,628],
        areaStyle:{
          color:'purple'
        },
        lineStyle:{
          width:0
        },
        itemStyle:{
          width:0,
          opacity:0
        },
        smooth:true
      }],
      grid:{
        top:0,
        bottom:0,
        left:0,
        right:0
      }
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #xuanwo{
    width: 300px;
    height: 300px;
  }
</style>