vue引用echarts折线平滑面积图

原创

于 2019-07-17 15:44:55 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts #折线图 #面积图

本文介绍了如何在Vue项目中使用ECharts库创建平滑折线面积图。提供了Vue中ECharts的安装教程链接以及ECharts官方实例资源，帮助读者更好地理解和应用ECharts组件。

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

vue中安装 echarts 不会用的有入门篇介绍文章： https://blog.youkuaiyun.com/qq_42221334/article/details/95354424

主要代码：


<template>
 
  <div>
     <div class="cardList_title">用户活跃度</div>
     <div class="Chart_one" id="myChartCurve"></div>
  </div>
 
</template>
 
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine(){

      //================== 用户活跃度=========================
      let myChartCurve = this.$echarts.init(document.getElementById('myChartCurve'))
      myChartCurve.setOption({
        color: ["#fcc550",'#4fd7fd'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效