echarts配置项sssddd
var category = ['小王', '小李', '小赵', '小马', '小刘', '小张'];var barData = [3100, 2142, 1218, 581, 431, 383];var option = { tooltip: { // trigger: 'axis', // axisPointer: { // type: 'none' // } show: false }, legend: { show: false//true }, grid: { left: 0, right: 0, bottom: 0, top: 0 }, yAxis: { type: 'value', max: 8000, // show: false,//true axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }, xAxis: { type: 'category', data: category, // show:false,//true axisLine: { show: false }, axisTick: { show: false }, axisLabel: { //x轴文本样式 textStyle: { color: 'red', //坐标值得具体的颜色 fontSize: 8 } } }, series: [ { name: '风险', type: 'bar', stack: 1, data: barData, barCategoryGap: 0, barWidth: '',//8 smooth: true, itemStyle: { borderRadius: 1,//2 color: 'gray', borderWidth: 1,//2 borderColor: 'transparent' } }, { name: '运行', type: 'bar', stack: 1, data: barData, barCategoryGap: 0, smooth: true, barWidth: '',//8 itemStyle: { borderRadius: 1,//2 borderWidth: 1,//2 borderColor: 'transparent', color: 'green' } }, { name: '总量', type: 'bar', stack: 2, data: barData, barCategoryGap: 0, barGap: '-100%',//0 smooth: true, label: { show: true, position: 'top', // textStyle: { // color: 'red', //label文本样式 // fontSize: 8 // } }, barWidth: '',//8 itemStyle: { borderRadius: 1,//2 borderWidth: 1,//2 borderColor: 'transparent', color: 'red' } } ]};
<template> <div class="cust-net-bar" v-show="show"> <div class="chart" ref="chartDom"></div> </div></template><script setup>import { onMounted, watch, onUnmounted, ref } from 'vue'import * as echarts from 'echarts';const props = defineProps({ option: { type: Object, default: {} }, show: { type: Boolean, default: false }})const chartDom = ref(null);let chartInstanse = null;console.log(chartDom, 12222);onMounted(() => { watch(() => props.show, (val) => { console.log(val, 12321); if (val) { initCharts() } }, { immediate: true })})const initCharts = () => { chartInstanse = echarts.init(chartDom.value) chartInstanse.setOption(props.option);}onUnmounted(() => { chartInstanse?.dispose()})</script><style lang="scss" scoped>.cust-net-bar { width: 224px; height: 320px; .chart { height: 100%; width: 100%; }}</style>
echarts配置项sssddd相关推荐
- echarts配置项图文介绍——xAxis
echarts配置项图文介绍--xAxis 本文仅用于个人学习笔记,文中出现错误或不恰当请在评论区指出.本文仅介绍稍有难度的配置项,极其简单易懂的配置项请自行移步官网查阅文档. 一.用途 直角坐标系 ...
- 【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出 文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
- echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line（上）
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
- Echarts配置项-2
配置项setOption() 全局配置 polar 极坐标系 可以用于 散点图 和 折线图.每个极坐标系拥有一个角度轴和一个半径轴. 极坐标官方实例 // 角度轴 angleAxis: {type: ...
- echarts 配置项手册legend
目录 legend legend.type legend.zlevel legend.z = 2 legend.left,right legend.top,bottom legend.width,he ...
- Echarts配置项-4
配置项setOption() 全局配置 axisPointer 坐标指示器 坐标轴指示器是指示坐标轴当前刻度的工具. 如下例,鼠标悬浮到图上,可以出现标线和刻度文本.axisPointer官网实例 上 ...
- echarts配置项属性值设置
echarts各配置项属性说明 一.图表标题 二.legend图例 三.值域 四.tooltip提示框 五.dataZoom区域缩放控制器 六.grid网格 七.生成一个适合你的列表 八.数值型坐标轴 ...
- 3、echarts配置项-xAxis
直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. var option{x ...
- echarts 配置项 series 中的data 多维度
ECharts dataset 详解 简单概括一下就是 数据集(dataset)中除第一行元素外,每一行数据对应x轴一个类目,有多少个系列,类中就有多少图(或者说bar图里的多少根柱子) 一个系列等于 ...
最新文章
- Tarjan无向图连通性
- Crontab运行php脚本
- jfreechart的使用
- MySQL服务启动及密码设置/配置远程访问
- C++const与#define 相比，有何优点？
- 【Tiny4412】烧写最小文件系统到EMMC
- 设置安全性根据Folder关联的条目模板设置上传文档安全性
- 你对ES6究竟了解多少？—— 有这一篇就够用了
- 新手入门之VIM 编辑小技巧
- 信息学奥赛一本通 1032：大象喝水 | OpenJudge NOI 1.3 14
- 测试范围不统一，引发的冲突问题
- AT指令:AT+CPMS
- 网管，真的是我该选择的路吗？
- atitit.二维码生成总结java zxing
- 蒙特卡洛方法到底有什么用(两个案例说明)
- speex java_JAVA版-微信高清语音.speex转.wav格式
- nvme-cli tool 刷FW(固件)
- 异常篇 之 记录一次因“MIUI 优化”引发的无奈。。。
- 【tokio】watch
- Tableau-盒须图