<template>
<div ref="chart" style="height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
var cate = ["质量通病1", "质量通病2", "质量通病3", "质量通病4", "质量通病5"];
//数据值,顺序和Y轴的名字一一对应
var barData = [92, 90, 75, 65, 55];
export default {
name: "LineChart",
props: ["dataList", "xAxisLabel", "yAxisLabel", "legend"],
watch: {
dataList() {
this.initChart();
},
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
backgroundColor: "#061740",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
//图表位置
grid: {
left: "5%",
right: "10%",
bottom: "3%",
top: "3%",
containLabel: true,
},
//X轴
xAxis: {
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//不显示X轴刻度线和数字
splitLine: { show: false },
axisLabel: { show: false },
},
yAxis: {
type: "category",
data: cate,
//升序
inverse: true,
splitLine: { show: false },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//key和图间距
offset: 10,
//动画部分
animationDuration: 300,
animationDurationUpdate: 300,
//key文字大小
nameTextStyle: {
fontSize: 5,
},
axisLabel: {
textStyle: {
color: "#F5F5F5", //更改坐标轴文字颜色
fontSize: 12, //更改坐标轴文字大小
},
},
},
series: [
{
//柱状图自动排序,排序自动让Y轴名字跟着数据动
realtimeSort: true,
name: "数量",
type: "bar",
data: barData,
barWidth: 6,
barGap: 10,
smooth: true,
valueAnimation: true,
//Y轴数字显示部分
label: {
normal: {
show: true,
position: "right",
valueAnimation: true,
offset: [5, -2],
textStyle: {
color: "#F5F5F5",
fontSize: 13,
},
formatter: "{c} %",
},
},
itemStyle: {
emphasis: {
barBorderRadius: 7,
},
//颜色样式部分
normal: {
barBorderRadius: 8,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 108, 255, 0.5)" },
{ offset: 1, color: "rgba(34, 200, 255, 1)" },
]),
},
},
},
],
//动画部分
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
chart.setOption(option);
window.addEventListener("resize", () => {
chart.resize();
});
},
},
};
</script>
echarts 横向柱状图
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10016.html
相关文章
-
npm时出现`SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve`错误
-
npm设置镜像及恢复默认设置
-
几种更新 npm 项目依赖的实用方法
-
解决npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher
-
Vue在线预览文件(docx/xlsx/pdf)
-
VUE宝典之vue-dialog使用
-
vue使用watch监听Vuex中存储的值变化
-
低代码开发之vue.draggable的使用(进阶:组件化拖拽生成功能页面)
-
vue3父组件调用子组件el-dialog对话框
-
邮票鉴赏|基于SSM+vue的邮票鉴赏系统的设计与实现(源码 数据库 文档)
发布的文章
mysql json字段使用以及常用json函数,配合springBoot和mybatis-plus简化开发
2024-06-05 13:06:07
【Java alibaba&hutool】JSON、Map、实体对象间的相互转换
2024-06-05 13:06:04
使用 mapstructure 解析 json
2024-06-05 13:06:03
使用Java操作XML和Json:介绍Java操作XML和Json的各种库和工具,通过实例演示它们的用法
2024-06-05 13:06:03
npm时出现`SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve`错误
2024-06-05 13:06:00
npm设置镜像及恢复默认设置
2024-06-05 13:06:00
几种更新 npm 项目依赖的实用方法
2024-06-05 13:06:53
解决npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher
2024-06-05 13:06:52
npm install yarn 出现的各种问题,以及配置环境变量
2024-06-05 13:06:41
Vue在线预览文件(docx/xlsx/pdf)
2024-06-05 13:06:31
大家推荐的文章