如何在vue中引用echarts

最新推荐文章于 2023-08-05 08:36:25 发布

Genesis A

最新推荐文章于 2023-08-05 08:36:25 发布

阅读量269

点赞数

分类专栏： VUE 文章标签： vue js javascript vue.js node.js

本文链接：https://blog.csdn.net/wyx963323759/article/details/114382831

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如何在vue中引用echarts

方法一

在home.vue中使用

<template>
	<div ref="charts"></div>
</template>

<script>
import echarts from 'echarts'
export default {
	name: 'home',
	methods: {
		initCharts () {
			let option = {
			        title: {
			          text: 'ECharts 入门示例'
			        },
			        tooltip: {},
			        legend: {
			          data: ['销量']
			        },
			        xAxis: {
			          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			        },
			        yAxis: {},
			        series: [{
			          name: '销量',
			          type: 'bar',
			          data: [5, 20, 36, 10, 10, 20]
			        }]
			};
			this.chart = echarts.init(this.$refs.chart)
			this.chart.setOption(option)
		}
	},
	mounted () {
		this.initCharts();
	}
}
</script>

方法二

把图的部分放入mapt.vue并在home.vue中引用，使代码简洁
map.vue部分

<template>
  <div ref="sjtu_map"></div>
</template>

<script>
import echart from 'echarts'

export default {
  name: 'sjtu-map',
  props: {
    text: {
      type: String,
      default: 'ECharts 入门示例'
    },
    legend: {
      type: [Array, String],
      default: () => ['销量']
    },
    xLabel: {
      type: [String, Number, Array],
      default: () => ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yData: {
      type: [Number, Array],
      default: () => [5, 20, 36, 10, 10, 20]
    }
  },
  methods: {
    initCharts () {
      let option = {
        title: {
          text: this.text
        },
        tooltip: {},
        legend: {
          data: this.legend
        },
        xAxis: {
          data: this.xLabel
        },
        yAxis: {},
        series: [{
          name: this.legend[0],
          type: 'bar',
          data: this.yData
        }]
      };

      this.chart = echart.init(this.$refs.sjtu_map)
      this.chart.setOption(option)
    }
  },
  mounted () {
    this.initCharts();
  }
}
</script>

<style>
</style>

home.vue部分

<template>
  <body>
    <div>
      <div>
        1212
        <button @click="test">This is a button!</button>
        Hello Vue!
      </div>
        <sjtu-map
          style="width: 400px; height: 300px"
          :text="mapData[0].text"
          :legend="mapData[1].legend"
          :x-label="mapData[2].xLabel"
          :y-data="mapData[3].yData"
        ></sjtu-map>
      </div>
  </body>


</template>

<script>
import echarts from 'echarts'
import sjtuMap from '_c/charts/map'

export default {
  name: 'home',
  data () {
    return {
      mapData: [
        {text: '这次我用了新的标题'},
        {legend: ['新销量']},
        {xLabel: ["新衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},
        {yData: [50, 20, 36, 10, 10, 20]}
      ]
    }
  },
  components: {
    sjtuMap
  },
  methods: {
    test () {
      console.log(this.mapData[0].text)
    }
  },
  mounted () {
  }
}


</script>

<style>
</style>