前言：

3.0實現echarts立體柱圖

實現效果：

實現步驟：

1、安裝echarts

cnpm i --save echarts

2、頁面定義容器

<template>
  <div ref="echart" class="echartDiv"></div>
</template>

3、中引入echarts

import * as echarts from 'echarts';

元件完整原始碼：

<template>
  <div ref="echart" class="echartDiv"></div>
</template>
 
<script>
import * as echarts from 'echarts';
import { onMounted,toRefs,ref,reactive } from 'vue';
export default {
  setup(){
    let state = reactive({
      xAxisData:['浩星','妍仔','哆啦a夢','李強','王穎','老王'],yAxisData:[4,22,1,11,23,11],yAxisData1:[1,1],echart: ref(),})
    const echartInit = () =>{
      var myChart = echarts.init(state.echart);
      // 指定圖表的配置項和資料
      var option = {
        tooltip: {
          trigger: "axis",axisPointer: {
            type: "shadow",// 預設為直線，可選為：'line' | 'shadow'
          },formatter: function(parms) {
            var str =
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "今天登入：" +
              parms[0].value + '次'
            return str;
          },},textStyle: {
          color: "#333",color: ["#7BA9FA","#4690FA"],grid: {
          containLabel: true,left: 
 
"10%",top: "20%",bottom: "10%",right: "10%",xAxis: {
          type: "category",data: state.xAxisData,axisLine: {
            lineStyle: {
              color: "#333",axisTick: {
            show: false,axisLabel: {
            margin: 20,//刻度標籤與軸線之間的距離。
            textStyle: {
              color: "#000",yAxis: {
          type: "value",axisLine: {
            show: true,客棧
 
            lineStyle: {
              color: "#B5B5B5",splitLine: {lrWizIl
            lineStyle: {
              // 使用深淺的間隔色
              color: ["#B5B5B5"],type: "dashed",opacity: 0.5,axisLabel: {},series: [{
          data: state.yAxisData,stack: "zs",type: "bar",barMaxWidth: "auto",barWidth: 60,itemStyle: {
            color: {
              x: 0,y: 0,x2: 0,y2: 1,type: "linear",global: false,colorStops: [{
                offset: 0,color: "#5EA1FF",{
                  offset: 1,color: "#90BEFF",],//下面的立體,控制顏色是cololrWizIl
 
r第一個
          {
            data: state.yAxisData1,type: "pictorialBar",barMaxWidth: "20",symbol: "diamond",symbolOffset: [0,"50%"],symbolSize: [60,15],zlevel: 2,//上面的立體,控制顏色是color第二個
          {
            data: state.yAxisData,symbolPosition: "end","-50%"],12],}
        ],};
      // 使用剛指定的配置項和資料顯示圖表。
      myChart.setOption(option);
    }
 
    //掛載
    onMounted(()=>{
      echartInit()
    })
 
    rethttp://www.cppcns.comurn {
      ...toRefs(state),echartInit
    };
  }
}
</script>
 
<style lang='s' scoped>
  .echartDiv{
    width: 100%;
    height: 400px;
  }
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。