我所遇到的问题

在style中用 sass

报错

运行

在vue中用echats

<template>
	<div>
		<div class="wen">
			<div class="w" ref="w"></div>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			// 初始化chart1实例
			const chart1 = echarts.init(this.$refs.w)
			// 使用图表并且配置图表的配置项和数据
			chart1.setOption({
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			});
		}
	}
</script>


<style scoped lang="scss">
	.wen {
		.w {
			width: 500px;
			height: 500px;
			background: red;
		}
	}
</style>

报错

从 npm 获取

npm install echarts

然后在页面的script中添加

import * as echarts from 'echarts';

位置

或者可以进行全局配置
echarts全局配置
在main.js中

   import Vue from 'vue';
   import App from './App.vue';
   import * as echarts from 'echarts';

   // 全局挂载Echarts到Vue的原型对象上
   Vue.prototype.$echarts = echarts;

   new Vue({
     render: h => h(App),
   }).$mount('#app');

在正常的vue组件中使用echarts

<script>
	export default {
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {=
			// 基于准备好的dom，初始化echarts实例， 这里可以使用ref来实例化
				const chartDom = document.getElementById('main');
				//这里使用echarts    this.$echarts.这是关键
				const myChart = this.$echarts.init(chartDom);
				// 设置图表配置项
				myChart.setOption({
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					xAxis: {
						data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
					},
					yAxis: {},
					series: [
						{
							name: '销量',
							type: 'bar',
							data: [5, 20, 36, 10, 10, 20]
						}
					]
				});
			},
		},
	}
</script>