Vue使用Echart圖標插件之柱狀圖

更新時間：2022年04月02日 12:26:07 作者：生活從程序開始

這篇文章主要為大家詳細介紹了Vue使用Echart圖標插件之柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Echart是一個很好的圖表繪制插件，里面有各種各樣的圖表供我們選擇，最近用echart做圖表比較多，所以現(xiàn)在記錄一下用到的柱狀圖用到的一些配置和用法：

主要注意的點：

1、創(chuàng)建的畫布必須給定大小，不然無法顯示
2、xAxis中的data默認為空時，X軸的的描述不存在，xAxis中axisLabel的interval的值表示隔幾列顯示，默認為1
3、Series就是圖表的數(shù)據(jù)中心，data是傳入的數(shù)據(jù)，可以通過barMaxWidth設置柱子的寬度
4、重點是柱子的顏色Series中itemStyle的color就是用來設置柱子的顏色的，如果柱子要使用不同的顏色那么需要先自定義一個數(shù)組來存放顏色字符串，然后通過遍歷的方法進行顏色的渲染

好了，廢話不多說直接上代碼，代碼的注釋很詳細，應該能看得懂。

<template>
? <div class="count-chart-wrapper">
? ? <div class="chart-title">
? ? ? 工程發(fā)貨統(tǒng)計
? ? ? <span>(近六天)</span>
? ? </div>
? ? <div class="count-chart" ref="chart"></div><!--必須設置寬高-->
? </div>
</template>
?
<script>
import echarts from "echarts";
?
export default {
? data() {
? ? return {
? ? ? colorList: [
? ? ? ? //設置發(fā)貨柱子的，普通的柱子顏色
? ? ? ? "#69D3BE",
? ? ? ? "#9D9E9F",
? ? ? ? "#F88282"
? ? ? ],
? ? ? colorList2: [
? ? ? ? //設置發(fā)貨柱子的，柱子實現(xiàn)漸變色
? ? ? ? ["#0282DE", "#3F28D0"],
? ? ? ? ["#FED701", "#E66938"],
? ? ? ? ["#67E0E3", "#0181DE"]
? ? ? ]
? ? };
? },
? mounted() {
? ? this.initChart();
? },
? methods: {
? ? // 初始化圖表樣式
? ? initChart() {
? ? ? this.chart = echarts.init(this.$refs.chart);
? ? ? let _this = this;
? ? ? this.chart.setOption({
? ? ? ? grid: {
? ? ? ? ? left: "50"
? ? ? ? ? // right: "60"
? ? ? ? },
? ? ? ? legend: {
? ? ? ? ? show: false,
? ? ? ? ? data: this.legends
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? trigger: "axis",
? ? ? ? ? show: true,
? ? ? ? ? axisPointer: {
? ? ? ? ? ? // 坐標軸指示器，坐標軸觸發(fā)有效
? ? ? ? ? ? type: "shadow" // 默認為直線，可選為：'line' | 'shadow'
? ? ? ? ? }
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? axisLine: { show: false }, // 軸線
? ? ? ? ? axisTick: { show: false }, // 刻度
? ? ? ? ? type: "category",
? ? ? ? ? data: ["一", "二", "三", "四", "五", "六"],//X軸顯示
? ? ? ? ? axisLabel: {
? ? ? ? ? ? color: "#333",
? ? ? ? ? ? interval: 0 //0：不隔行顯示，1：隔一行顯示
? ? ? ? ? }
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? type: "value",
? ? ? ? ? nameTextStyle: {
? ? ? ? ? ? fontWeight: "bold",
? ? ? ? ? ? align: "left",
? ? ? ? ? ? padding: [0, 50, 10, 0],
? ? ? ? ? ? color: "#ffffff"
? ? ? ? ? },
? ? ? ? ? axisLine: { show: false }, // 軸線
? ? ? ? ? axisTick: { show: false }, // 刻度
? ? ? ? ? axisLabel: {
? ? ? ? ? ? color: "#333",
? ? ? ? ? ? formatter: `{value}`//Y軸的顯示形式，value，percent
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {//實現(xiàn)漸變色的柱子
? ? ? ? ? ? data: ["1", "2", "3", "1", "2", "3"],//顯示的數(shù)據(jù)
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? smooth: true, // 平滑
? ? ? ? ? ? symbol: "none",
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: "#FF5858"
? ? ? ? ? ? },
? ? ? ? ? ? barMaxWidth: 30,//設置柱子的寬度
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? show: true, //開啟顯示
? ? ? ? ? ? ? ? ? position: "top", //在上方顯示
? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? //數(shù)值樣式
? ? ? ? ? ? ? ? ? ? color: "#222",
? ? ? ? ? ? ? ? ? ? fontSize: 14
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? color: params => {
? ? ? ? ? ? ? ? ? let colorList = _this.colorList2;//實現(xiàn)柱子的漸變色數(shù)組
? ? ? ? ? ? ? ? ? let index = params.dataIndex;//dataIndex ?data中數(shù)據(jù)的下標
? ? ? ? ? ? ? ? ? if (params.dataIndex >= colorList.length) {
? ? ? ? ? ? ? ? ? ? index = params.dataIndex - colorList.length;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //漸變色使用方法
? ? ? ? ? ? ? ? ? ? { offset: 0, color: colorList[index][0] },
? ? ? ? ? ? ? ? ? ? { offset: 1, color: colorList[index][1] }
? ? ? ? ? ? ? ? ? ]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {//實現(xiàn)普通色的柱子
? ? ? ? ? ? data: ["2.5", "3.5", "1.5", "2.5", "1.5", "2.5"],
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? smooth: true, // 平滑
? ? ? ? ? ? symbol: "none",
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: "#FF5858"
? ? ? ? ? ? },
? ? ? ? ? ? barMaxWidth: 30,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? show: true, //開啟顯示
? ? ? ? ? ? ? ? ? position: "top", //在上方顯示
? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? //數(shù)值樣式
? ? ? ? ? ? ? ? ? ? color: "#222",
? ? ? ? ? ? ? ? ? ? fontSize: 14
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? color: params => {
? ? ? ? ? ? ? ? ? let colorList = _this.colorList;//柱子的顏色是普通的顏色
? ? ? ? ? ? ? ? ? let index = params.dataIndex;
? ? ? ? ? ? ? ? ? if (params.dataIndex >= colorList.length) {
? ? ? ? ? ? ? ? ? ? index = params.dataIndex - colorList.length;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? return colorList[index];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? });
? ? }
? }
};
</script>
?
<style>
.count-chart-wrapper {
? width: 800px;
? margin: 0 auto;
? background-color: antiquewhite;
}
.count-chart {
? position: relative;
? margin: 0 auto;
? width: 400px;
? height: 400px;
}
</style>

結果圖樣：