Echarts

萝卜的程序媛日记

已于 2023-03-14 11:14:05 修改

阅读量111

点赞数

分类专栏： JavaWeb 文章标签： echarts 前端 javascript Powered by 金山文档

于 2023-03-14 09:43:11 首次发布

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

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建一个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.样式介绍