安装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: "搜索引擎" }
]
}
]
});