只需要两步:
1.下载echarts
在下载echarts时,很多人可能会遇到安装不成功或者报错的问题,解决办法可以通过重装或者是装之前的版本来解决。
npm install echarts --save
npm install echarts@4.8.0 --save
//卸载命令
npm uninstall echarts
2.main.js中引入并注册
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
若是引入后报错,可尝试以下引入方式:
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
到这里,echarts的安装就OK了
已经将echarts安装引入后,接下来需要在项目中使用:
<div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
var myChart = this.$echarts.init(document.getElementById('myChart'));
let option = {
......
}
myChart.setOption(option)
1.单个柱状图
<template>
<div class="chartBox">
<div id="pillarsChart" :style="{ width: '100%', height: '100%' }">div>
div>
template>
<script>
import { getJxbyl } from "@api/screen"; //引入的接口文件
export default {
data() {
return {};
},
mounted() {
this.getJxbyl(); //接口方法
},
methods: {
//接口方法
getJxbyl() {
//请求接口
getJxbyl({}).then((res) => {
if (res.code == "10000") {
this.pillarsEcharts(res.data.xData, res.data.yData); //调用图表方法并将参数(数据)传递过去
}
});
},
//图表方法
pillarsEcharts(x, y) {
//获取id并初始化图表
var myChart = this.$echarts.init(document.getElementById("pillarsChart"));
//配置项
let option = {
tooltip: {
//鼠标触摸显示值
trigger: "axis",
axisPointer: {
type: 'shadow'
}
},
xAxis: {
//x轴设置
type: "category", //类型
data: x, //x即接口方法传递过来的参数也是x轴的数据(x等同于res.data.xData)
},
yAxis: {
//y轴设置
type: "value", //类型
},
series: [
{
data: y, //y即接口方法传递过来的参数也是y轴的数据(x等同于res.data.yData)
type: "bar", //类型
},
],
};
myChart.setOption(option); //通过setOption()方法生成图表
window.addEventListener("resize", function () {
myChart.resize(); //图表自适应的一个方法
});
},
},
};
script>
<style scoped>
.chartBox {
width: 50%;
height: 50vh;
}
style>
2.基础折线图
<template>
<div class="chartBox">
<div id="brokenChart" :style="{ width: '100%', height: '100%' }">div>
div>
template>
<script>
import { obd } from "@api/screen"; //引入接口文件
export default {
data() {
return {};
},
mounted() {
this.obd(); //接口方法
},
methods: {
//请求接口
obd() {
obd({}).then((res) => {
if (res.code == "10000") {
this.brokenChart(res.data.xData, res.data.yData); //调用图表方法并将参数(数据)传递过去
}
});
},
//图表方法
brokenChart(x, y) {
//获取id并初始化图表
var myChart = this.$echarts.init(document.getElementById("brokenChart"));
//配置项
let option = {
tooltip: {
//鼠标触摸显示值
trigger: "axis",
},
xAxis: {
type: "category", //类型
data: x, //x即接口方法传递过来的参数也是x轴的数据(x等同于res.data.xData)
},
yAxis: {
type: "value",
},
series: [
{
data: y, //y即接口方法传递过来的参数也是y轴的数据(x等同于res.data.xData)
type: "line", //类型
},
],
};
myChart.setOption(option); //通过setOption()方法生成图表
window.addEventListener("resize", function () {
myChart.resize(); //图表自适应的一个方法
});
},
},
};
script>
<style scoped>
.chartBox {
width: 30%;
height: 50vh;
}
style>
3.基础饼状图
<template>
<div class="chartBox">
<div id="cakeChart" :style="{ width: '100%', height: '100%' }">div>
div>
template>
<script>
import { getMeachDistribution } from "@api/screen"; //引入的接口文件
export default {
data() {
return {};
},
mounted() {
this.getMeachDistribution(); //接口方法
},
methods: {
//接口方法
getMeachDistribution() {
//请求接口
getMeachDistribution({}).then((res) => {
if (res.code == "10000") {
this.cakeEcharts(res.data); //调用图表方法并将参数(数据)传递过去
}
});
},
//图表方法
cakeEcharts(data) {
//获取id并初始化图表
var myChart = this.$echarts.init(document.getElementById("cakeChart")); //调用图表方法并将参数(数据)传递过去
let option = {
tooltip: {
//鼠标触摸显示值
trigger: "item",
},
series: [
{
name: "月份",
type: "pie",
radius: "50%",
data: data, //data即接口方法传递过来的参数也是图表的数据(data等同于res.data)
},
],
};
myChart.setOption(option); //通过setOption()方法生成图表
window.addEventListener("resize", function () {
myChart.resize(); //图表自适应的一个方法
});
},
},
};
script>
<style scoped>
.chartBox {
width: 30%;
height: 50vh;
}
style>