echarts 饼图移动端_VUE移动端项目中使用Echart

安装Echart依赖

npm install echarts -save

在main.js中引入

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

在组件中使用

// 基于准备好的dom，初始化echarts实例 写在 mounted()里面

let sum_earnings = this.$echarts.init(

document.getElementById("sum_earnings")

);

this.drawLin( sum_earnings);

//写在methods方法里面封装然后在，在mounted()里面调用个人比较喜欢这种的写法，方便封装

drawLine: function(name) {

// 绘制图表

name.setOption({ '代码块(option里面的)' })

}

关于响应式

// 需要在mounted()方法里面初始化echarts实例之后调用

window.onresize = function() {

实例的名字.resize();

};

我用到的代码及注释

折线图

折线图.png

// 绘制图表

name.setOption({

// 提示框

tooltip: {

trigger: "axis" // 坐标触发

},

// 图表的标注

legend: {

// 标注前面的形状这个是圆形

icon: "circle",

// 数据名称

data: ["FIL", "TIC"],

// y轴的位置 可选 top center bottom x轴同理

y: "bottom"

},

// 图形在画布的距离

grid: {

top: 10

},

// x轴的数据

xAxis: {

type: "category",

boundaryGap: false,

data: ["01", "02", "03", "04", "05", "06", "07"]

},

// y轴的数据

yAxis: {

type: "value"

},

// 折线图 (写几条折线图就写几个对象；是这个{}对象)

series: [

{

name: "FIL",

type: "line",

stack: "总量",

data: [12, 13, 10, 13, 9, 23, 21],

color: "#ffb54c"

},

{

name: "TIC",

type: "line",

stack: "总量",

data: [20, 12, 11, 24, 29, 33, 31],

color: "#9186fc"

}

]

});

饼状图(环形图)

环形图.png

name.setOption({

// 移入显示文字

tooltip: {

trigger: 'item', // 项目触发

formatter: "{a}
{b}: {c} ({d}%)"

},

// 图解 可以设置在圆环图的中心

graphic: {

type: "text",

left: "center",

top: "center",

z: 2,

zlevel: 100,

style: {

text: "你好",

fontSize: 36,

x: 100,

y: 100,

textAlign: "center",

fill: "#f00",

width: 100,

height: 100

}

},

// 左侧提示 图表的标注

legend: {

orient: 'vertical',

x: 'left',

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

series: [

{

name: "访问来源",

// 显示成饼状

type: "pie",

// 内环和外环的大小

radius: ["50%", "70%"],

avoidLabelOverlap: false,

// 主标题

label: {

normal: {

// 是否默认显示文字

show: false

// position: 'center'

},

emphasis: {

// 移入是否显示文字

show: false, // 不显示

// 文字类型

textStyle: {

fontSize: "30",

fontWeight: "bold"

}

}

},

// 是否显示连接线

labelLine: {

normal: {

show: false

}

},

// 每一个饼状图的信息

data: [

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

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

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

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

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

]

}

]

});