在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>第二步：创建组件在工程中的组件文件夹（没

高堂明镜悲白发

3419人浏览 · 2021-05-09 16:30:43

高堂明镜悲白发 · 2021-05-09 16:30:43 发布

第一步：引入脚本链接

找到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>即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^