echarts数据怎么赋值 vue_Vue使用Echarts以及Echarts配置分享

一、本篇文章将给大家分享如何在vue中使用echart以及echart各项配置，这些配置都是工作中比较常见以及常用到的，所以给大家分享下，希望对大家有用。

二、vue中使用echart。

1、首先下载echart依赖，这里采用的npm包管理工具，在项目中运行命令：

npm install echarts --save-dev

2、在main.js里引入echart：

import echarts from ‘echarts‘;

3、在vue中注册echart：

Vue.prototype.$echarts = echarts;

4、在vue中使用echart：

data() {return{

}

},

mounted(){

initEchart()

},

methods:{

initEchart(){//初始化echart实例，获取dom

var echartDemo=this.$echarts.init(document.getElementById(‘echartDemo‘));

option={

color: [‘#618FC8‘],

backgroundColor:‘#F8F8F8‘,

tooltip : {

trigger:‘axis‘,

axisPointer : {//坐标轴指示器，坐标轴触发有效

type : ‘shadow‘ //默认为直线，可选为：‘line‘ | ‘shadow‘

}

},

grid: {

left:‘3%‘,

right:‘4%‘,

bottom:‘3%‘,

top:20,

containLabel:true},

xAxis : [

{

type :‘category‘,

data : [‘Decade Ⅰ‘, ‘Decade Ⅱ‘, ‘Decade Ⅲ‘],

axisTick: {

alignWithLabel:true}

}

],

yAxis : [

{

type :‘value‘,

mi