柱形图和折线图在一个坐标轴ECharts

奇葩问题天天有今天要做一个柱形图和折线图在一个坐标轴上
先上个参考的地址
大佬地址
唔为什么别人有了还要再写呢 1是以后好找；2是研究过的才是自己的
先上个图片

然后上代码

这个也是扒过来的尴尬上图地址
html

<!--引入在尾部-->
<th:block th:include="include :: echarts-js"/><div class="ibox float-e-margins col-sm-12"><div class="ibox-content "><div class="echarts " style="height: 550px;" id="echarts-line-chart"></div></div></div>

script

function save(param) {var selectZhu = {type: "post",url: "/reports/echartData",data: param,success: function (r) {var lineChart = echarts.init(document.getElementById("echarts-line-chart"));var lineoption = {title: {text: "访问数据统计",textStyle: {color: "#000",fontSize: 26},},tooltip: {trigger: "axis",},grid: {top: "25%",right: "45",bottom: "20",left: "30"},legend: {data: r.dataY,top: "0%",textStyle: {color: "black" //图例文字}},xAxis: [{type: "category",data: r.dataX,axisLine: {lineStyle: {color: "#939495"}},axisLabel: {textStyle: {color: "#939495", fontSize: "14"}}}],yAxis: [{type: "value",name: "访问数",splitLine: {show: false},axisLabel: {show: true,fontSize: 14,color: "#939495"},axisLine: {min: 0,max: 10,lineStyle: {color: "#939495"}} //左线色},{type: "value",name: "",show: true,axisLabel: {show: true,fontSize: 14,formatter: r.dataX,color: "#939495"},axisLine: {lineStyle: {color: "#939495"}}, //右线色splitLine: {show: false,lineStyle: {color: "#939495"}} //x轴线}],series: [{name: '访问次数',type: 'bar',data: “x轴数据”,itemStyle: {normal: {color: '#4ad2ff'}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '访问次数'}]}}, {name: '访问次数',type: 'line',data: “y轴数据”,itemStyle: {normal: {color: 'orange'}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '访问次数'}]}}]};lineChart.setOption(lineoption);window.onresize = lineChart.resize;}}$.ajax(selectZhu)}

要想直接进入就出现

    $(function () {save(null);})

后台返回的数据是两个list 一个是x轴一个是y轴

css

.ibox h3 {float: left;color: #000;font-size: 24px;}.ibtn h3 {color: #000;font-size: 24px;border-bottom: 1px solid #e7eaec;padding-bottom: 10px;}.ibox button {float: right;width: 100px;height: 30px;line-height: 30px;text-align: center;color: #744dfe;border: 0;background: #ede8fe;outline: none;border-radius: 5px;font-size: 16px;}.top div {width: 24%;float: left;margin: 30px 1% 0 0;padding: 40px 50px;border-radius: 10px;color: #ffffff;font-size: 24px;}.top div span {font-size: 40px;display: block;margin-top: 20px;padding-left: 10px;}.top div:nth-child(4) {margin-right: 0;}.ibox {float: left;box-shadow: 5px 5px 15px #eeeeee;border-radius: 10px;background: #ffffff;padding: 30px;margin-top: 10px;height: 725px;}.ibox-content {height: 500px;}.ibtn button img {height: 130px;}.ibtn button span {padding: 0 10px;}.ibtn button {width: 40%;margin: 30px 1% 10px 4%;height: 120px;line-height: 120px;border: 0;background: #f9f9f9;color: #000000;font-size: 24px;border-radius: 10px;}.ibtn button:nth-child(1) {margin-left: 7%;}

又是努力的一天
加油！！！

柱形图和折线图在一个坐标轴ECharts相关推荐

怎么把柱形图和折线图放在一起_EXCEL中统计图表怎么合并在一起？（如柱形图和折线图）...
先做出柱形图,然后选择一个项目的柱形,右键-选择图表类型- 选择折线图就行了选择一个数据系列做成一种图形,比如柱型,再选择一种数据拖进图中,右键设置数据系列,改变其图表类型就OK了. 先选柱状图画 ...
EXCEL完成一个柱形图与折线图组合图表
EXCEL2016与EXCEL2013版本中新增的推荐的图表功能,可以帮助我们快速选择合适的图表.而我们今天要讲的就是其中一个典型的实例组合图表.我们先看一下我们要用的数据与完成的效果. 第一步:我们 ...
python 的pyecharts可视化.柱形图和折线图的结合（2）
Exharts是百度开源的一个数据可视化的JS库,pyecharts是python和Echarts的一个接口下面是柱形图和折线图的结合,可以从两种图看出不一样的东西环境:pip install p ...
Excel柱形图和折线图分别作图
遇到Excel里可能有时的图片需要柱形图,折线图等各种图的汇和使用,该问主要讲述该过程以及次坐标的设定 1.作图数据 Year GP replacement 2018 505564.7 13 201 ...
visualmap折线图_使用Echarts几分钟制作出折线图、饼图、柱状图等
ECharts,缩写来自Enterprise Charts. ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer Data Visual ...
echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）
echarts3是向下兼容echarts2的,所以echarts2切换到echarts3基本无需改代码. 饼图.柱形图.折线图:用的echarts2的配置项,但是能正常显示代码片段: [javasc ...
修改python plot折线图的坐标轴刻度
修改python plot折线图的坐标轴刻度,这里修改为整数: 代码如下: from matplotlib import pyplot as plt import matplotlib.ticker ...
分享一个WM上绘制饼图、柱形图、折线图的控件类
最近工作中需要在Windows Mobile上实现统计图表绘制,如饼图.柱形图.折线图等,虽然要求的形式比较简单,但是不允许用第三方或开源的控件类库,只好自己动手写了一个简单的.初步实现了饼图.柱形图 ...
Java poi XWPFDocument 操作2007Word，实现参数替换、新增插入替换表格数据、创建饼状图、柱形图、折线图
工作中经常会用到 Apache POI去操作Word文档,自己整理了一个工具类,简单实用,其中包含了新建标题.段落.表格.饼图.柱形图.折线图等方法.先上效果图在pom文件中引入依赖 <dep ...

柱形图和折线图在一个坐标轴ECharts

柱形图和折线图在一个坐标轴ECharts相关推荐

最新文章

热门文章