echarts 好看的柱形图

option = {legend: {},// 鼠标放上显示提示tooltip: {trigger: 'axis',    //触发类型 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。  axisPointer: {  //坐标轴指示器，坐标轴触发有效type: 'cross',      //默认为直线，可选line shadow crosscrossStyle: {color: '#fff'}}},// x轴xAxis: {show:true,axisPointer: {  //写到X轴就是给X轴改的鼠标放上后的样式type: 'shadow',     },// 坐标轴标签axisLabel: {inside: true,textStyle: {color: '#fff'}},//X坐标刻度axisTick: {show: false,    //坐标轴线是否显示inside:true,     //坐标轴线是否朝内},//X坐标标签 就是文字axisLabel:{show:true,      //坐标标签是否显示inside:false,   //坐标标签是否朝内},//grid 区域中的分隔线axisLine: {show: true},// 网格区域splitArea:{show:true},data: ["1月","2月","3月","4月","5月"],z: 10},// y轴yAxis: {show:true,      //是否显示position:'left',   //显示位置offset:0,      //y轴相对于默认位置的偏移type:'value',   //轴的类型name:'',    //轴的名称nameLocation:'end',// 坐标名称的样式 颜色 内边距 字体大小等nameTextStyle:{color:"#000",padding:[5,0,0,10],},nameGap:20, //坐标名称和轴线的距离// nameRotate:270, //坐标名字的旋转// 坐标轴 轴线axisLine: {show: true,// 箭头symbol:['none','arrow'], //['none','arrow']这是只在末端显示箭头，'arrow'两端都显示箭头 'none'就是不显示symbolSize:[8, 8] ,            //---箭头大小symbolOffset:[0,7],            //---箭头位置//线lineStyle:{color:'green',  //线的颜色width:1,    //线的宽度type:'solide' //显得类型}},//坐标轴 刻度 就是纵向多出来的小线axisTick: {show: true,inside:false,        //---是否朝内lengt:3,            //长度lineStyle:{//color:'red',            //---默认取轴线的颜色width:1,type:'solid',},},//坐标轴标签 坐标轴显示的数值axisLabel: {show:true,                    //---是否显示inside:false,                //---是否朝内rotate:0,                    //---旋转角度margin: 8,                    //---刻度标签与轴线之间的距离textStyle: {color: '#999'}},//--网格区域splitArea:{                    show:false,                    //---是否显示，默认false},  },// 数据区域的缩放dataZoom: [{type: 'inside'}],//内容数据series: [{name: '全部的',type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[// 柱子0%的颜色{offset: 0, color: '#E27BF6'},//柱子50%的颜色{offset: 0.5, color: '#D575F2'},//柱子100%的颜色{offset: 1, color: '#D14CFB'}])},// barWidth:'30', //调节柱子的宽度data: [900, 23438, 4200, 3000, 4000, 5000]},{name: '已完成的',type: 'bar',// 图形形状itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[// 柱子0%的颜色{offset: 0, color: '#01F4D4'},//柱子50%的颜色{offset: 0.5, color: '#02E2E8'},//柱子100%的颜色{offset: 1, color: '#02D2F9'}])},//鼠标放到柱子上的样式// emphasis: {//     itemStyle: {//         color: new echarts.graphic.LinearGradient(//             0, 0, 0, 1,//             [//                 {offset: 0, color: '#2378f7'},//                 {offset: 0.7, color: '#2378f7'},//                 {offset: 1, color: '#83bff6'}//             ]//         )//     }// },// barWidth:'30', //调节柱子的宽度// barCategoryGap:'50%',   //调节柱子之间的距离data: [3020, 4800, 3600, 6050, 4320, 6200,5050]},{name: '未完成的',type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[// 柱子0%的颜色{offset: 0, color: '#FA86CC'},//柱子50%的颜色{offset: 0.5, color: '#F65CB9'},//柱子100%的颜色{offset: 1, color: '#F73FAE'}])},// barWidth:'30', //调节柱子的宽度data: [1000, 9356, 2356, 3000, 5000, 4832]},{name: '超期已完成',type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[// 柱子0%的颜色{offset: 0, color: '#C9EC8D'},//柱子50%的颜色{offset: 0.5, color: '#B2E951'},//柱子100%的颜色{offset: 1, color: '#99E218'}])},// barWidth:'30', //调节柱子的宽度data: [900, 23438, 4200, 3000, 4000, 5000]},{name: '超期未完成的',type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[// 柱子0%的颜色{offset: 0, color: '#F1F288'},//柱子50%的颜色{offset: 0.5, color: '#EEEF51'},//柱子100%的颜色{offset: 1, color: '#E5E709'}])},// barWidth:'30', //调节柱子的宽度data: [900, 23438, 4200, 3000, 4000, 5000]},]
};

echarts 好看的柱形图相关推荐

echarts 实现圆柱体柱形图效果
前言记录在 vue 中实现echarts 实现圆柱体柱形图效果本文使用 echarts 为 5.x 版本一.效果展示圆柱体柱形图实现效果二.echarts图表配置 dom 中使用.初始化 e ...
echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）
配置效果配置每个柱子不同颜色的代码 itemStyle: {normal: {// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,分别表示右,下,左,上.例如(0, ...
eCharts好看的响应式圆环饼图及文字附vue源码代码
先看一下echarts图表效果图表只要resize就会随着页面比例的变化而变化,但是图表中的标识字不可以哦,官方api不接受rem,vh,vw来调整字体大小. 有两种解决办法,第一种是监听页面元素, ...
echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图
关键点:series.type: "pictorialBar", <div class="cl-top-content" id="deviceO ...
ECharts实现立体柱形图
目录一.效果图预览二.准备 1.JavaScript源码运行文件,用以运行代码 2.需要文本编辑器如notepad++ 三.编写图像属性代码 1.编辑界面预览 2.完整代码四.运行一.效果图预 ...
echarts好看的折线图配置
Echarts效果图:(主要仿制layui官网的echarts图形示例) 代码配置,直接放入echarts示例官网,即可查看效果 option = {tooltip: {trigger: 'axis' ...
echarts formatter_基于echarts实现某些骚需求
阅读前提示:本文不会讲解ehcarts的API使用配置,要看请移步逛网文档,在此只提供一种关于某些特殊需求的快捷方便出效果的思路或建议... 做过基于echarts图表开发的小伙伴可能都有一种感觉,就 ...
前端开发学习常用网站网址及介绍（都是免费的）
在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!! 扫码加博主微信 1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转 2.百度翻译,不懂的单词, ...
做折线图坐标轴数字_你做的柱状图太丑了，这些美化技巧教给你（收藏）
之前 PPT 饼图教程推出后,有小伙伴留言询问有没有关于柱形图 / 条形图的一些玩法,想借此在一些汇报上突出新意,所以就有了今天这篇依旧很干的教程. 不得不说柱形图和条形图在做数据汇报时很常用,但因为 ...

echarts 好看的柱形图

echarts 好看的柱形图相关推荐

最新文章

热门文章