echart 实现多柱状图+多折线图

当图表中存在多个柱状图时，如何让每条折线折点对应在每个柱状图中点位置？

配置如下：

option = {color: ['#83c034', '#ea4748', '#f8ac00', '#00a2ea'], // 柱状图颜色legend: {data: ['篮球', '足球', '排球', '羽毛球']},xAxis: [{type: 'category',name: '星期(天)',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],axisLabel: {color: '#00000',fontSize: 10,interval: 0,}},{type: 'value',max: 7 * 100,show: false}],yAxis: [{type: 'value',name: '采购数量(个)'}],series: [{data: ['46', '48', '48', '70', '40', '46', '50'],name: '篮球',type: 'bar',emphasis: {focus: 'series'},itemStyle: {}},{data: ['49', '52', '84', '52', '53', '51', '53'],name: '足球',type: 'bar',emphasis: {focus: 'series'},},{data: ['62', '70', '59', '47', '68', '79', '67'],name: '排球',type: 'bar',emphasis: {focus: 'series'},},{data: ['75', '58', '45', '54', '46', '61', '58'],name: '羽毛球',type: 'bar',emphasis: {focus: 'series'},},{xAxisIndex: 1,data: [[20, '46'], [120, '48'], [220, '48'], [320, '70'], [420, '40'], [520, '46'], [620, '50']],type: 'line',symbol: 'circle',symbolSize: 6, itemStyle: {normal: {lineStyle: {width: 1,color: '#83c034'}},}},{xAxisIndex: 1,data: [[40, '49'], [140, '52'], [240, '84'], [340, '52'], [440, '53'], [540, '51'], [640, '53']],type: 'line',symbol: 'circle',symbolSize: 6, //拐点大小itemStyle: {normal: {lineStyle: {width: 1, //折线宽度color: '#ea4748' //折线颜色}}}},{xAxisIndex: 1,data: [[60, '62'], [160, '70'], [260, '59'], [360, '47'], [460, '68'], [560, '79'], [660, '67']],type: 'line',symbol: 'circle', //拐点样式symbolSize: 6, //拐点大小itemStyle: {normal: {lineStyle: {width: 1, //折线宽度color: '#f8ac00' //折线颜色}}}},{xAxisIndex: 1,data: [[80, '75'], [180, '58'], [280, '45'], [380, '54'], [480, '46'], [580, '61'], [680, '58']],type: 'line',symbol: 'circle', //拐点样式symbolSize: 6, //拐点大小itemStyle: {normal: {lineStyle: {width: 1, //折线宽度color: '#00a2ea' //折线颜色}}}}]
};

图例如下：

echart 实现多柱状图+多折线图相关推荐

vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应.否则不出效果!!目前已知可以生效有: 第一种1: npm install echarts@5.1.2 --save npm insta ...
SpringBoot Web前端动态显示柱状图、折线图
技术背景: 1. SpringBoot + JPA 2. 前端使用Bootstrap 3. 需要将后台数据生成柱状图.折线图在前台显示问题: 如果将后台数据生成柱状图.折线图在前台显示遇坑: 1 ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
如何使用python画折线图-Python数据可视化：使用Python画柱状图和折线图
Python爬虫太火了,没写过爬虫,都不敢说自己学过Python?! 可是刚一开始学我就遇到了难题----数据分析!听起来很高大上,有没有? 想要做爬虫,就得先学会使用数据分析工具,制作图表这是最基本 ...
python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
如何使用SAP UI5 web Component的React框架的柱状图和折线图
导入柱状图和折线图: import { BarChart, LineChart } from "@ui5/webcomponents-react-charts": 在自定义的Rea ...
python爬取网页版QQ空间，生成词云图、柱状图、折线图（附源码）
python爬取网页版QQ空间,生成词云图.柱状图.折线图最近python课程学完了,琢磨着用python点什么东西,经过一番搜索,盯上了QQ空间,拿走不谢,欢迎点赞收藏,记得github给个sta ...

echart 实现多柱状图+多折线图

echart 实现多柱状图+多折线图相关推荐

最新文章

热门文章