1.首先安装 npm install echarts --save
2. 在main.js引入
// 引入echarts import echarts from 'echarts' // 一般都要加个$加到vue的原型链上，方便引用 Vue.prototype.$echarts = echarts
3. 封装代码在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>
效果图如下：
//仅供参考,如有雷同,纯属虚构
