Vue结合Apache Echarts

Vue结合Apache Echarts

1.通过npm获取Apache Echarts

npm install echarts --save

2.在main.js引用Apache Echarts

import * as echarts from 'echarts';
Vue.use(echarts);

3.创建Dom

  <div id="myChart" style="width: 600px;height:400px;"></div>

4.创建表图里面的数据

var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
 
   xAxis: {
      //如果绑定vue数据直接this.变量名就可以了
    data: [2018, 2019, 2020, 2021, this.tip]
  },
  yAxis: {},
        series: [
    {
      data: [10, 40, 28, 23, 40],
      type: 'line',
      areaStyle: {}
    },
    {
      data: [25, 39, 23, 35, 40],
      type: 'line',
      areaStyle: {
        color: '#ff0',
        opacity: 0.5
      }
    }
  ]
})

5.在特定的vue页面引用echarts

<script>
import * as echarts from 'echarts';
export default {	.......

6.初始化页面数据

6.1 方法A 在mounted初始化

  //自启动
  mounted()
	 var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
 
   xAxis: {
    data: [2018, 2019, 2020, 2021, this.tip]
  },
  yAxis: {},
        series: [
    {
      data: [10, 40, 28, 23, 40],
      type: 'line',
      areaStyle: {}
    },
    {
      data: [25, 39, 23, 35, 40],
      type: 'line',
      areaStyle: {
        color: '#ff0',
        opacity: 0.5
      }
    }
  ]
     })
 
  },

6.2 方法B方法

  data () {
    return {
		 fileList: [],
		 t: null,
        option: {
			series: [
				{
				type: 'pie',
				data: [
					{
					value: 335,
					name: '直接访问'
					},
					{
					value: 234,
					name: '联盟广告'
					},
					{
					value: 1548,
					name: '搜索引擎'
					}
				]
				}
			]
		},
    }
  },
      
  //自启动
  mounted(){
	var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption(this.option)
  },

这篇好文章是转载于：学新通技术网