Vue前端柱状图(最最最简单..)

2023-08-31 01:44| 来源: 网络整理| 查看: 265

通过echarts来实现柱状图的效果，echarts是针对数据报表等展现的一个产品，具体了解看官方网站：Echarts官网，在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性，去识别图表的各个部分的专业名称，才能从它API中获取相应属性去实现你想要效果!

实现效果

业务代码:

import BarChart1 from "./dashboard/BarChart1"; components: { BarChart1, }, import echarts from "echarts"; require("echarts/theme/macarons"); // echarts theme import resize from "./mixins/resize"; const animationDuration = 6000; export default { mixins: [resize], props: { className: { type: String, default: "chart", }, width: { type: String, default: "360px", }, height: { type: String, default: "317px", }, option: { type: Object }, chartData: { type: Object, // default: [], }, }, watch: { chartData: { deep: true, handler(val) { this.initChart(val); }, }, }, data() { return { chart: null, poption: this.option, }; }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { // console.log("chartData2",this.chartData) this.chart = echarts.init(this.$el, "macarons"); this.chart.setOption({ backgroundColor: 'rgba(255, 255, 255, 1)', tooltip: { trigger: "axis",//鼠标悬浮提示数据 axisPointer: { // Use axis to trigger tooltip type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' }, // formatter: function(data) { // console.log("data",data); // return data.newcarNames +""+ "车辆总数 : " + data.newcarMount + "" + "金额(万元): " + data.newcarAmount + // "" + "占比 :" + data.newcarRatio + "%"; // }, }, legend: { data: this.chartData, }, grid: {//柱状图在窗口的位置设置 left: "3%", right: "4%", top: "4%", bottom: "1%", containLabel: true, }, yAxis: { type: "value", minInterval: 1, }, xAxis: { type: "category", data: this.chartData.数据, //X轴数据 axisLabel:{ interval:0, rotate:0 //值>0向右倾斜，值

【本文地址】

公司简介

联系我们