1.首先安装 npm install echarts --save
2. 在main.js引入
// 引入echarts
import echarts from 'echarts'
// 一般都要加个$加到vue的原型链上，方便引用
Vue.prototype.$echarts = echarts3. 封装代码在scr/components中新建ECharts文件夹与ECharts.vue文件
4. ECharts.vue 封装文件代码如下
<template>
<div ref="echart"></div>
<!-- 使用方法=>需要引入当前组件 -->
</template>
<script>
import echarts from "echarts";
export default {
props: {
isAxisChart: {
//注意饼图和y轴排放 需要传递 :isAxisChart="饼图是2 柱状y轴排放是1"
type: Number,
default: 0,
},
chartData: {
//折线、柱状图
type: Object,
default() {
return {
xData: [],
series: [],
};
},
},
},
watch: {
chartData: {
handler: function () {
this.initChart();
},
deep: true,
},
},
methods: {
initChart() {
this.initChartData();
if (this.echart) { //判断渲染
this.echart.setOption(this.options);
} else {
this.echart = echarts.init(this.$refs.echart);
this.echart.setOption(this.options);
}
},
initChartData() {
if (this.isAxisChart == 0) {
//拆线图或者柱状图
this.axisOption.xAxis.data = this.chartData.xData;
this.axisOption.series = this.chartData.series;
} else if (this.isAxisChart == 1) {
// y轴排放 拆线图或者柱状图
this.yaxisOption.yAxis.data = this.chartData.xData;
this.yaxisOption.series = this.chartData.series;
} else {
//饼图
// console.log(555, this.chartData.series)
this.normalOption.series = this.chartData.series;
}
},
},
data() {
return {
//折线、柱状图
axisOption: {
legend: {
data: ["", ""],
},
grid: {
x: 50, //控制x轴文字与底部的距离
y2: 100, // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
},
// 提示框
tooltip: {
trigger: "axis",
},
toolbox: {
show: true,
feature: {
// dataView: { show: true, readOnly: false }, 文本形式
magicType: { show: true, type: ["line", "bar"] }, //切换形态
restore: { show: true }, //还原形态
saveAsImage: { show: true }, //下载功能
},
},
calculable: true,
xAxis: {
type: "category", // x类目轴
data: [],
axisLine: {
lineStyle: {
color: "#333333", //x类目轴颜色
},
},
axisLabel: {
interval: 0, //强制文字产生间隔
rotate: 45, //文字逆时针旋转45°
textStyle: {
//文字样式
fontSize: 13,
fontFamily: "Microsoft YaHei",
},
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#333333", //y类目轴颜色
},
},
},
],
// color: [
// "#2ec7c9",
// "#b6a2de",
// "#5ab1ef",
// "#ffb980",
// "#d87a80",
// "#8d98b3",
// ],
series: [],
},
//y轴排放折线、柱状图
yaxisOption: {
title: {
text: "World Population",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
grid: { // 控制图的大小，调整下面这些值就可以，
x: 120,//控制x轴文字与底部的距离
// y2: 100 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
inverse: true, //设置倒序排序
axisLabel:{
textStyle: { //文字样式
fontSize: 14,
fontFamily: 'Microsoft YaHei'
}
},
data: [],
},
series: [],
},
//饼图
normalOption: {
{
top: 'bottom'
},
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [],
},
// 给个初始值null不然会报错
echart: null,
};
},
computed: {
options() {
if (this.isAxisChart == 0) {
return this.axisOption;
} else if (this.isAxisChart == 1) {
return this.yaxisOption;
} else {
return this.normalOption;
}
},
},
};
</script>
5.使用流程
<template>
<div style="background:white">
<div style="display:flex">
<div>
<echart
style="height: 300px; width:500px"
:chartData="echartData.user1"
/>
</div>
<div>
<echart
style="height: 300px; width:500px"
:chartData="echartData.order"
/>
</div>
</div>
<div style="display:flex">
<div>
<echart
style="height: 500px; width:500px"
:chartData="echartData.video"
:isAxisChart="2"
/>
</div>
<div>
<echart
style="height: 500px; width:600px"
:chartData="echartData.user"
:isAxisChart="1"
/>
</div>
</div>
</div>
</template>
<script>
import {
selectbatchnumfordeptyc,
selectbatchnumfordeptqs,
} from "@/api/statistics";
import { selectAll } from "@/api/settings";
import Echart from "../../../components/ECharts/ECharts.vue";
export default {
components: { Echart },
data() {
return {
echartData: {
order: { //代表折线
xData: [],
series: [],
},
user: { //user代表柱状
xData: [],
series: [],
},
user1: { //user代表柱状
xData: [],
series: [],
},
video: { //代表饼图
series: [],
},
},
};
},
created() {},
mounted() {
this.initData()
},
methods: {
initData(){
//柱状
this.echartData.user1.xData = ["1","2","3","4","5"]
this.echartData.user1.series = [
{
name: "外资",
barWidth: 25,//柱状大小
color: "#ee6666",
type: "bar",
data: [10,20,30,40,50],
itemStyle:{
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ee6666',
fontSize: 14,
}
}
}
},
},
]
//拆线
this.echartData.order.xData = ["1","2","3","4","5"]
this.echartData.order.series = [
{
name: "外资",
barWidth: 25,//柱状大小
color: "#ee6666",
type: "line",
data: [10,20,5,10,35],
itemStyle:{
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ee6666',
fontSize: 14,
}
}
}
},
},
]
//饼图
this.echartData.video.series = [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
]
}
]
//柱状y轴
this.echartData.user.xData = ["1","2","3","4","5"]
this.echartData.user.series = [
{
name: "外资",
barWidth: 25,//柱状大小
color: "#ee6666",
type: "bar",
data: [10,20,30,40,50],
itemStyle:{
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ee6666',
fontSize: 14,
}
}
}
},
},
{
name: "内资",
barWidth: 25,//柱状大小
color: "#ddac1d",
type: "bar",
data: [10,20,30,40,50],
itemStyle:{
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ee6666',
fontSize: 14,
}
}
}
},
},
]
}
},
};
</script>
<style>
</style>
效果图如下：
//仅供参考,如有雷同,纯属虚构
