echarts的基本使用以及如何使用官方实例的方法

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="box" style="width: 600px;height:400px;"></div>   //如果需要改背景色直接在这里修改便可以

 

export default {

data() {

return {

//调用了eacharts官方实例的 ，这里写option的属性

// 指定图表的配置项和数据

option: {

backgroundColor: "#2c343c",

title: {

text: "Customized Pie",

left: "center",

top: 20,

textStyle: {

color: "#ccc"

}

},

tooltip: {

trigger: "item",

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

visualMap: {

show: false,

min: 80,

max: 600,

inRange: {

colorLightness: [0, 1]

}

},

series: [

{

name: "访问来源",

type: "pie",

radius: "55%",

center: ["50%", "50%"],

data: [

{ value: 335, name: "直接访问" },

{ value: 310, name: "邮件营销" },

{ value: 274, name: "联盟广告" },

{ value: 235, name: "视频广告" },

{ value: 400, name: "搜索引擎" }

].sort(function(a, b) {

return a.value - b.value;

}),

roseType: "radius",

label: {

normal: {

textStyle: {

color: "rgba(255, 255, 255, 0.3)"

}

}

},

labelLine: {

normal: {

lineStyle: {

color: "rgba(255, 255, 255, 0.3)"

},

smooth: 0.2,

length: 10,

length2: 20

}

},

itemStyle: {

normal: {

color: "#c23531",

shadowBlur: 200,

shadowColor: "rgba(0, 0, 0, 0.5)"

}

},

animationType: "scale",

animationEasing: "elasticOut",

animationDelay: function(idx) {

return Math.random() * 200;

}

}

]

},

};

},

methods: {

customized() {

//方法里面第一步// 基于准备好的dom，初始化echarts实例

var myChart = this.$echarts.init(document.getElementById('box'));

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(this.option);

}

},

mounted() {

// 注意：一定需要在mounted中调用才行

this.customized();

}

};

 

 

最后在main.js入口文件中 全局引入挂载

// 引入echarts

// import echarts from 'echarts'

//挂载到实例对象上

// Vue.prototype.$echarts =echarts

 

 

 

==================================

需要加下面两句  这个是main全局引入的

import echarts from 'echarts'

Vue.use(echarts)//全局使用echarts

 

<div class="echartr">

<!-- //右边环形图 -->

<div class="bargraph" id="barg2"></div>

</div>

 

let bargraph = echarts.init(document.getElementById('barg2'));

bargraph.setOption(this.option3);

 

=======================================

有时候需要加上这些代码 在页面尺寸发生改变时 随着页面改变而变大或小

mounted() {

let _this = this;

_this.$nextTick(() => {

let bargraph0 = echarts.init(_this.$refs.barg0);

bargraph0.setOption(_this.option0);

window.addEventListener("resize", bargraph0.resize);

let bargraph = echarts.init(_this.$refs.barg);

bargraph.setOption(_this.option2);

window.addEventListener("resize", bargraph.resize);

let bargraph2 = echarts.init(_this.$refs.barg2);

bargraph2.setOption(_this.option3);

window.addEventListener("resize", bargraph2.resize);

});

}