在Vue项目中引入echarts图表的方法（引入cdn）

最新推荐文章于 2024-06-05 09:42:47 发布

高堂明镜悲白发

最新推荐文章于 2024-06-05 09:42:47 发布

阅读量3.2k

点赞数 1

分类专栏： Vue与GIS 文章标签： vue 数据可视化 echarts

本文链接：https://blog.csdn.net/ashtyukjhf/article/details/116566171

版权

Vue与GIS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一步：引入脚本链接

找到src/index.html，在<head><\head>标签中插入脚本链接：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

第二步：创建组件

在工程中的组件文件夹（没有就新建一个）新建文本文件，用.vue后缀命名。

修改图表仅需要修改option变量的内容即可，可以从echarts网站的示例中直接复制，更改option。

<template>
  <div id="app">
    <div ref="chart" class="container"></div>
  </div>
</template>

<script>
  export default {
    name: "App",
    mounted(){

      let myChart = echarts.init(this.$refs.chart);
      let option={
		  
		color: [
		    "#aaff7f",
		    "#2f4554",
		    "#61a0a8"
		],
		  
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
  myChart.setOption(option);

    }
  }

</script>

<style>
</style>

此外，也可以将option变量写入组件的data区：

<template>
  <div id="app">
    <div ref="chart" class="container"></div>
  </div>
</template>

<script>
  export default {
    name: "App",
	data(){
		return{
			option={
					  
			color: [
					    "#aaff7f",
					    "#2f4554",
					    "#61a0a8"
					],
					  
			  title: {
			    text: 'ECharts 入门示例'
			  },
			  tooltip: {},
			  xAxis: {
			    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			  },
			  yAxis: {},
			  series: [{
			    name: '销量',
			    type: 'bar',
			    data: [5, 20, 36, 10, 10, 20]
			  }]
			}
		}
	},
    mounted(){

		let myChart = echarts.init(this.$refs.chart);

		myChart.setOption(this.option);



    }
  }

</script>

<style>
</style>

第三步在页面中引用组件

打开App.vue，在<script></script>区域，引入组件，自定义一个组件名，如“mychart”，然后再components中注册。

import mychart from '../components/mychart.vue'

export default {
  components:{
	mychart
  }
}

然后到<template></template>区域，在需要图标的地方使用标签<mychart><\mychart>即可。

高堂明镜悲白发

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
5
评论
在Vue项目中引入echarts图表的方法（引入cdn）

第一步：引入脚本链接找到src/index.html，在<head><\head>标签中插入脚本链接：<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>第二步：创建组件在工程中的组件文件夹（没有就新建一个）新建文本文件，用.vue后缀命名。修改图表仅需要修改option变量的内容即可，可以从
复制链接

扫一扫