echarts之柱状图（2）

PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~

自行设置css和html结构，这里主要是js：

(function() {//找到画图的区域var myChart = echarts.init(document.querySelector(".horization .chart"));//第一类柱子的颜色var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];var option = {grid: {left: '20%',bottom: '18%',containLabel: false, //grid区域是否包含刻度标签},xAxis: {type: 'value',boundaryGap: 'true',//坐标轴轴线axisLine: {show: false}},//y轴中的两个对象分别表示左边和右边的y轴yAxis: [{type: 'category',//是否反向坐标轴inverse: true,axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},axisTick: { // 不显示刻度show: false,alignWithLabel: true},axisLine: { //不显示y轴线条show: false},data: ['NODE', 'VUE', 'javascript', 'CSS3', 'HTML5']},{type: 'category',inverse: true,axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},axisTick: { // 不显示刻度show: false,alignWithLabel: true},axisLine: { //不显示y轴线条show: false},data: [100, 200, 300, 400, 500]}],//series中的两个对象分别表示两类柱子：条条和框框series: [{type: 'bar',name: "条",//相当于CSS中的z-index,一个柱子设为0，一个柱子设为1，表示两个柱子叠加效果yAxisIndex: 0,// 柱子之间的距离barCategoryGap: 50,data: [70, 80, 10, 78, 69],barWidth: 10, //柱子的宽度//柱子的样式itemStyle: {barBorderRadius: 5, //圆角color: function(params) { //给柱子设置颜色//console.log(params);params指的是柱子对象， dataIndex 是当前柱子的索引号var num = myColor.length;return myColor[params.dataIndex % num]}},// 柱子上的文本标签label: {show: true,// 图形内显示position: 'inside',// 文字的显示格式:c指的是data中的数据值formatter: "{c}%"}},{name: "框",type: 'bar',yAxisIndex: 1,barCategoryGap: 50,data: [100, 100, 100, 100, 100],barWidth: 15, //柱子的宽度itemStyle: {color: 'none',borderColor: "#00c1de",borderWidth: 3,barBorderRadius: 15 //圆角}}]};myChart.setOption(option);//让图表跟随屏幕自适应window.addEventListener("resize", function() {myChart.resize();});
})();

echarts之柱状图（2）相关推荐

Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...
echarts，柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
Echarts地图柱状图问题
1.Echarts地图柱状图问题需要根据功能修改自己所需的地图模块,当前功能是根据line和散点图进行处理,根据经纬度形成一个柱状图, 比如:需要两个或者多个柱状图 1.添加多个经纬度,添加多个柱状 ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...

echarts之柱状图（2）

echarts之柱状图（2）相关推荐

最新文章

热门文章