前言

记录在 vue 中实现echarts 分段式柱形图的效果

一、效果展示

分段式柱形图实现效果

二、echarts图表配置

1、下载echarts

npm i echarts -D 

2、全局引入echarts

在main.js 中 ，全局挂载echarts

import * as echarts from 'echarts'
Vue.prototype.echarts = echarts;

3、页面中使用

	<template>
		<div id="myBarChart"></div>
	</tremplate>

JS

<script>
export default {
	data() {
		return {
			myChart: null
		};
	},
	mounted(){
		this.$nextTick(() => {
			let chartDom = document.getElementById("myBarChart");
			this.myChart = this.echarts.init(chartDom);
		})
	}
}
</script>

option 配置如下：

let option = {
    grid: {
        top: 20,
        left: 15,
        right: 0,
        bottom: 30
    },
    dataset: [
        {	
        	// 每个维度的信息
            dimensions: [
                "name",
                "value"
            ],
            // 目标数组，相当于 serise 中的 data
            source: [
                {
                    name: "公司0",
                    value: 0
                },
                {
                    name: "公司1",
                    value: 40
                },
                {
                    name: "公司2",
                    value: 80
                },
                {
                    name: "公司3",
                    value: 120
                },
                {
                    name: "公司4",
                    value: 160
                },
                {
                    name: "公司5",
                    value: 200
                },
                {
                    name: "公司6",
                    value: 240
                },
                {
                    name: "公司7",
                    value: 280
                },
                {
                    name: "公司8",
                    value: 320
                },
                {
                    name: "公司9",
                    value: 360
                },
                {
                    name: "公司10",
                    value: 400
                },
                {
                    name: "公司11",
                    value: 440
                },
                {
                    name: "公司12",
                    value: 480
                },
                {
                    name: "公司13",
                    value: 520
                }
            ]
        },
        // 数据转换器
        {
            transform: {
                type: "sort", // 排序
                config: {
                    dimension: "value", // 映射字段 value
                    order: "desc", // 倒叙
                }
            }
        }
    ],
    xAxis: {
        type: "category",
        axisLine: {
            show: true,
            lineStyle: {
                color: "#13427D"
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            fontSize: 10,
            fontWeight: 500,
            color: "#1DCEFF",
            opacity: 0.6,
            rotate: 15
        }
    },
    yAxis: {
        axisLine: {
            show: false,
            lineStyle: {
                color: "#13427D"
            }
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    series: [
        {
            type: "pictorialBar",
            symbol: "",
            symbolSize: [12, 3], // 图形大小 [width，height]
            color: "#65C6E7", // 柱形图颜色
            symbolRepeat: true, // 图形是否重复
            symbolBoundingData: 2000, // 指定图形界限的值
            label: { // 是否显示label
                show: true,
                color: "#77C8FF",
                fontSize: "10",
                position: "top", // label 显示在文字的上方
            },
            encode: {
                x: "name", // x 轴 映射字段
                y: "value", // y 轴 映射字段
            },
            datasetIndex: 1
        }
    ]
}

绘制图表

	this.myChart.setOption(option);
	
	// 根据窗口大小调整图表大小
	window.onresize = () => {
		this.myChart.resize();
	};

总结

以上就是今天要讲的内容，本文仅仅简单介绍了实现分段式柱形图的使用，如果想使用更炫酷的效果请查看 官网API文档