Echarts_代写echarts-CSDN博客

本文链接：https://blog.csdn.net/wohehel/article/details/129029027

该文章展示了如何在Vue项目中安装Echarts，创建一个柱状图，并实现图表数据的动态修改。通过npm安装Echarts，然后在组件中导入并初始化图表，设置初始数据。在mounted生命周期钩子中渲染图表。进一步地，文章演示了如何在点击按钮时改变图表的数据值，但未在代码中正确触发数据更新。

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

创建一个vue项目

执行npm install echarts

执行指令npm run serve

引入echarts

import * as echarts from 'echarts'

创建图表

<template>
  <div id="demo" style="width: 600px;height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'App',
  components: {
  },
  mounted:function(){
    var myChart =echarts.init(document.querySelector('#demo'))
    var option ={
      title:{
        text: "萝卜程序员demo"
      },
      tooltip:{},//提示框
      legend:{
        data:['人数']
      },
      xAxis:{
        data:['vue','react','jquery']
      },
      yAxis:{},
      series:[
        {
          name:"人数",
          type:"bar",
          data:[2000,1500,500]
        }
      ]
    }
    myChart.setOption(option);
  }
}
</script>

动态修改图表数据

<template>
  <div id="demo" style="width: 600px;height: 400px;"></div>
  <button @click="changeOption">修改图表数据值</button>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'App',
  data() {
    return {
      option: {
        title: {
          text: "萝卜程序员demo"
        },
        tooltip: {},//提示框
        legend: {
          data: ['人数']
        },
        xAxis: {
          data: ['vue', 'react', 'jquery']
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: [2000, 1500, 500]
          }
        ]
      }
    }
  },
  methods:{
    changeOption(){
      console.log(123);
      this.option = {
        title: {
          text: "萝卜程序员demo"
        },
        tooltip: {},//提示框
        legend: {
          data: ['人数']
        },
        xAxis: {
          data: ['vue', 'react', 'jquery']
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: [1000, 2000, 1500]
          }
        ]
      }
      // myChart.setOption(this.option);
    }
  },
  watch:{
    option:function(){
      var myChart = echarts.init(document.querySelector('#demo'))
      myChart.setOption(this.option);
    }
  },
  components: {
  },
  mounted: function () {
    var myChart = echarts.init(document.querySelector('#demo'))
    myChart.setOption(this.option);
  }
}
</script>

7.样式介绍