第一步： 引入echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts //引入组件（全局引入）
第二步： id绑定
<div id="pie"> /// pie 用于存放所要绘制的图形
第三步： 配置options，创建echarts实例
option1: {
title: {
text: "双坐标轴事例", //标题
show: false //是否显示标题
},
tooltip: {
// 气泡
trigger: "axis",
formatter: "{b}<br/>{a0}:{c0} <br/>{a1}：{c1}", //b为数据名；a0,a1为系列名，c0为y轴左侧数据，c1为右侧
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
//图例
data: ["成功数量", "失败数量"],
// 图例的位置 通过定位来确定
bottom: 0 // 图例显示的位置
},
xAxis: {
type: "category",
data: [ ]
},
yAxis: [ // 双y轴显示
{
type: "value",
name: "成功数量", // y轴文字提示
axisLabel: {
formatter: "{value} ",
},
// y轴样式 颜色
axisLine: {
lineStyle: {
color: "#ff1717"
}
},
/// //网格线 设置为虚线
splitLine: {
lineStyle: {
type: "dashed" //设置网格线类型 dotted：虚线 solid:实线
},
show: true //隐藏或显示
}
//
},
{
type: "value",
name: "失败数量",
axisLabel: {
formatter: "{value} "
},
// y轴样式
axisLine: {
lineStyle: {
color: "#2d7fff"
}
},
///
splitLine: {
//网格线
lineStyle: {
type: "dashed" //设置网格线类型 dotted：虚线 solid:实线
},
show: true //隐藏或显示
}
//
}
],
series: [
{
symbol: "none",
smooth: true, /// 是否曲线平滑
name: "成功数量",
type: "line", //柱状图
// data: [5, 20, 36, 10, 10, 20, 100, 20, 30, 50],
data: [],
symbol: "circle", //折线点设置为实心点
symbolSize: 4, //折线点的大小
itemStyle: {
normal: {
color: "#ff1717" /// 折线点的颜色
},
lineStyle: {
color: "red" /// 折线的颜色
}
}
},
{
symbol: "none",
smooth: true, /// 是否曲线平滑
name: "失败数量",
type: "line", //线形图
yAxisIndex: "1", //使坐标轴在右侧显示，当有多个坐标轴时，数字依次增大，可建立多个Y轴
// data: [0, 300, 80, -72, 0, 100, 20],
data: [],
symbol: "circle", //折线点设置为实心点
symbolSize: 4, //折线点的大小
itemStyle: {
normal: {
color: "#2d7fff" /// 折线点的颜色
},
lineStyle: {
color: "#2d7fff" /// 折线的颜色
}
}
}
]
},
创建element的实例（注意是this.$echarts ， 因为是全局引用了）
pie() {
var myChart = this.$echarts.init(document.getElementById("pie"));
myChart.setOption(this.option);
myChart.resize();
},
屏幕的自适应 (实现屏幕的宽度的自适应)
window.onresize = (() => {
this.pie();
})
