vue3 中使用echarts图表——柱状图

柱状图是比较常用的图形结构,所以我先收集一些精美的柱状图

一、柱状图:设置圆角和颜色

html 复制代码
<template>
  <div class="box" ref="chartDom"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
let chartDom = ref(null); //注意变量名 和 ref名字要对应
onMounted(() => {
  initChart();
});

const initChart = () => {
  var myChart = echarts.init(chartDom.value);
  var option = {
    tooltip: {
      // 鼠标悬浮提示数据
      trigger: "axis",
      backgroundColor: "rgba(32, 33, 36,.7)",
      borderColor: "rgba(32, 33, 36,0.20)",
      borderWidth: 15,
      textStyle: {
        // 文字提示样式
        color: "#fff",
        fontSize: "12",
      },
      axisPointer: {
        // 坐标轴虚线
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },

    // },
    grid: {
      // 控制图表的位置
      left: "5%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      axisLabel: {
        // X轴线 标签修改
        textStyle: {
          color: "white", //坐标值得具体的颜色
          fontSize: "10",
        },
      },
      data: ["A", "B", "C", "D", "E", "F"],
    },
    yAxis: {
      axisLabel: {
        // y轴线 标签修改
        textStyle: {
          color: "white", //坐标值得具体的颜色
        },
      },
    },
    series: [
      {
        data: [2549, 12421, 2637, 3146, 15189, 9562],
        type: "bar",
        barWidth: "48%", //调整柱状图宽度
        itemStyle: {
          normal: {
            /*--------设置柱形图圆角 [左上角,右上角,右下角,左下角]-------------*/
            borderRadius: [12, 12, 0, 0],
            /*--------设置柱形图渐变色 -------------*/
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0,244,255,1)",
              },
              {
                offset: 1,
                color: "rgba(0,77,167,1)",
              },
            ]),
          },
        },
      },
    ],
  };
  option && myChart.setOption(option);
};
</script>

<style scoped>
.box {
  width: 24vw;
  height: 60vh;
  background-color: #031a67;
}
</style>
相关推荐
Anson Jiang18 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼22 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君9 小时前
实现最大异步并发执行队列
javascript
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军11 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy12 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端12 小时前
vue2 常用内置指令总结
前端·vue.js