1、通过npm获取echarts
npm install echarts --save
2、在vue项目中引入echarts
这里有两种方式，一种全局注入，
（1）在main.js?中添加下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
（2）新建vue组件，在组件中引入
import * as echarts from 'echarts'
3、然后在组件中使用
<template>
????<div ref="echart"></div>
</template>
<script>
import * asecharts from 'echarts'
exportdefault{
? ??data() {
? ? return {
? ? ? options : {
? ? ? ? tooltip: {
? ? ? ? ? ? trigger: 'axis',
? ? ? ? ? ? axisPointer: {
? ? ? ? ? ? type: 'shadow'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? grid: {
? ? ? ? ? ? left: '3%',
? ? ? ? ? ? right: '4%',
? ? ? ? ? ? bottom: '3%',
? ? ? ? ? ? containLabel: true
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? ? type: 'value',
? ? ? ? ? ? boundaryGap: [0, 0.01]
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? ? type: 'category',
? ? ? ? ? ? data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? ? {
? ? ? ? ? ? name: '2011',
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? data: [18203, 23489, 29034, 104970, 131744, 630230]
? ? ? ? ? ? },
? ? ? ? ]
? ? ? ? },
? ? };
? },
?mounted() {
? ? this.$nextTick(() => {
? ? ? this.initChart();
? ? });
? },
? methods:{
? ? ? initChart(){
? ? ? ? this.echart = echarts.init(this.$refs.echart)
? ? ? ? this.echart.setOption(this.options)
? ? ? },
? }
}
</script>
今天多付出一份努力，是为了明天能有多一种选择。