echarts top5监控图

用echarts 中的 bar 柱状图改的top5监控

代码：(数据是我自己排序传入data的，这块代码只是像展示样式 )

    const names = ["name1","name2", "name3","name4","name5"]const values = [98, 76.77, 55.5, 44, 33, 22]const myColor = ['#1089E7', '#FF8E4D', '#56D0E3', '#1089E7', '#F57474']const option = {// 图标位置grid: {top: '10%',left: '25%',right: '15%',bottom: '1%'},tooltip: {show: true,backgroundColor: '#fff',textStyle: {fontSize: 12,color: '#152934',lineHeight: 24},formatter: function (params) {return `${params.name} : ${params.data} %`}},xAxis: {show: false},yAxis: [{show: true,data: names,inverse: true,axisLine: 'none',splitLine: {show: false},axisTick:'none',axisLabel: {color: '#fff',formatter: (value, index) => {if (value.length > 10) {   //因为名字过长显示的问题，所以做了截取return [`{title|${value.slice(0, 7)}...}`].join('')} else {// [`{lg|${index + 1}}` + `{title|${value}}`]return [`{title|${value}}`].join('')}},rich: {lg: {color: '#ff7e00',borderRadius: 15,align: 'left',width: 8,height: 15},title: {color: '#fff',width: 50,align: 'left',borderRadius: 5,padding: 5}}}}],series: [{type: 'bar',yAxisIndex: 0,data: values,barWidth: 6,barGap: '-100%',label: {normal: {show: true,position: 'right',textStyle: {color: '#fff',fontSize: '12'},formatter: function (value) {return value.value + '%'}}},itemStyle: {normal: {barBorderRadius: 10,color: function (params) {var num = myColor.lengthreturn myColor[params.dataIndex % num]}}}}]}this.chart.setOption(option)

echarts top5监控图相关推荐

golang通过itemid获取zabbix graph监控图
2019独角兽企业重金招聘Python工程师标准>>> #简述本文将使用golang和第三方http client 库gorequest编写.如需要只使用golang 标准库可以参 ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
分布式监控系统Zabbix-3.0.3-完整安装记录（4）-解决zabbix监控图中出现中文乱码问题...
之前部署了Zabbix-3.0.3监控系统,在安装数据库时已经将zabbix库设置了utf-8字符. 首先确定zabbix开启了中文支持功能: 登录到zabbix服务器的数据目录下(前面部署的zabb ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts添加背景图
echarts添加背景图来源:https://www.liuyjuan.com/295.html 1)简单的方法直接给到外层的div元素上 /*比如说这段css样式*/ .TheStatistic ...
vue中使用ECharts实现折线图和饼图
在开发后台管理项目时,需要统计后台用户数据,以折线图和饼图的形式显示,这边采用apache-echarts来实现需求. 1.安装echarts和引入 npm install echarts --sav ...
Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...

echarts top5监控图

echarts top5监控图相关推荐

最新文章

热门文章