echarts柱状图双柱状图基本用法

内容有点多，慢慢看哦！废话不多说，上代码

如果想要把横向变成竖向的话就把xAxis和yAxis的内容交换一下就好啦

首先定义一个盒子，设置大小

<style>.box{width: 50%;height: 500px;margin: 0 auto;}
</style> <body><div class="box" id="echart"></div>
</body

引入提前下载好的echarts文件


<head>这里我是放在head标签里面的，你们可以试试放到其他地方<script type="text/javascript" src="./jquery.js"></script></head><script type="text/javascript" src="./area_echarts.js"></script>
<script type="text/javascript" src="./echarts.min.js"></script>

下面就是echarts代码

<script>echarts_1()function echarts_1() {var myChart = echarts.init(document.getElementById('echart'));option = {calculable: true,legend: {//   指示框名字  注意！要和下方series中的name一起改data: ['女', '男'],// 指示框位置  距离上下左右多少right: '5%',// top: '50%',textStyle: {color: '#4F4F4F'   //字体颜色}},xAxis: [{type: 'category',data: ['2018', '2019', '2020', '2021', '2022'],axisLine: {   //x轴线的颜色以及宽度show: true,   //是否显示X轴lineStyle: {color: "#4F4F4F",}},axisLabel: {// interval: 0,  //间隔几条显示// rotate: 20,  // 切斜度数// fontSize: 10,   //字体大小},axisTick: {//是否显示刻度线show: false},}],yAxis: [{type: 'value',axisTick: {//y轴刻度线show: false},axisLine: {show: false, // Y轴lineStyle: {color: "#4F4F4F",}},splitLine: { // 表格里面Y轴线条show: true,lineStyle: {type: 'dashed',    //虚线color: '#04072F'    //虚线颜色}}}],// 整体大小grid: {left: '3%',right: '4%',top: '10%',bottom: '5%',containLabel: true},series: [{barWidth: 12,//柱子宽度name: '女',type: 'bar',data: [135.6, 162.2, 32.6, 20.0, 6.4],itemStyle: {//颜色样式部分normal: {barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左] label: {show: true, //开启数字显示         position: 'top', //在上方显示数字         textStyle: { //数值样式          color: '#474646',  //字体颜色fontSize: 10       //字体大小}},//   柱状图颜色渐变color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#8277E9" },{ offset: 1, color: "#CC77E9" },]),}}},{barWidth: 12,//柱子宽度name: '男',type: 'bar',data: [28.7, 70.7, 175.6, 182.2, 48.7],itemStyle: {//颜色样式部分normal: {barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左] label: {show: true, //开启数字显示         position: 'top', //在上方显示数字          textStyle: { //数值样式          color: '#474646',   //字体颜色fontSize: 10        //字体大小}},//   柱状图颜色渐变color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#017CE4" },{ offset: 1, color: "#249EFD" },]),}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();})}</script>

这里有注意的详细看法

最终内容

okk,有不足欢迎补充啊

echarts柱状图双柱状图基本用法相关推荐

echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
双柱状图与双折线图混合
问题: 双柱状图的时候,折线图不能从柱状图的中心点开始解决方法:使用双x轴来控制折线的起始位置代码 var option = {backgroundColor:'#4a4a4a',tooltip: ...
python绘制直方图显示数字_Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
python画并列柱状图-Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
【MATLAB】柱状图（bar的用法）
[MATLAB]柱状图(bar的用法) 语法: [1]bar(y) [2]bar(x,y) [3]barh(y,属性) 先举例: >> x=0:0.1:2*pi; >> y=c ...
Python 绘制柱状图和双柱状图
python用matplotlib画图时不显示中文,显示乱码小正方形在程序最前面加上,如下代码 # encoding=utf-8 import matplotlib.pyplot as plt fr ...
Python画柱状图（双柱状图，三柱状图）且显示对应数值
一.双柱状图效果图使用python实现双柱状图,并且在柱状图形的顶部显示对应数值: 二.双柱状图实现代码 import matplotlib import matplotlib.pyplot as ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...

echarts柱状图双柱状图基本用法

echarts柱状图双柱状图基本用法相关推荐

最新文章

热门文章

echarts柱状图 双柱状图基本用法

echarts柱状图 双柱状图基本用法相关推荐

最新文章

热门文章

echarts柱状图双柱状图基本用法

echarts柱状图双柱状图基本用法相关推荐