echart柱状图和折线图混合

最新推荐文章于 2024-05-22 09:23:54 发布
最新推荐文章于 2024-05-22 09:23:54 发布
阅读量6.9k 收藏 4
点赞数

来自博主：https://www.cnblogs.com/zjf-1992/p/6371765.html

Echarts 官网主页  http://echarts.baidu.com/index.html

Echarts 更多项目案例  http://echarts.baidu.com/echarts2/doc/example.html

Echart参数设置 http://echarts.baidu.com/echarts2/doc/doc.html#Legend

实现源码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Echarts柱状折线混合图</title>

        <!-- 引入 ECharts 文件 -->

        <script src="js/echarts/echarts.js"></script>

    </head>

    <body>

        <div id="main" style="width: 600px;height:400px;"></div>

        <script type="text/javascript">

            var  option = {

                    tooltip: {

                        trigger: 'axis'

                    },

                    legend: {

                        data:['降水量','折线']

                    },

                    xAxis: [

                        {

                            type: 'category',

                            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

                        }

                    ],

                    yAxis: [

                        {

                            type: 'value',

                            name: '水量/ml',

                            min: 0,

                            max: 250,

                            interval: 50,

                            axisLabel: {

                                formatter: '{value} '

                            }

                        }

                    ],

                    series: [

                         

                        {

                            name:'降水量',

                            type:'bar',

                            /*itemStyle: {

                                normal: {

                                    color: new echarts.graphic.LinearGradient(

                                        0, 0, 0, 1,

                                        [

                                            {offset: 0, color: '#fe6262'},

                                            {offset: 0.5, color: '#fe4141'},

                                            {offset: 1, color: '#fe1818'}

                                        ]

                                    ),

                                },

                                emphasis: {

                                    color: new echarts.graphic.LinearGradient(

                                        0, 0, 0, 1,

                                        [

                                            {offset: 0, color: '#fe6262'},

                                            {offset: 0.5, color: '#fe4141'},

                                            {offset: 1, color: '#fe1818'}

                                        ]

                                    )

                                }

                            },*/

                            

                            /*设置柱状图颜色*/

                            itemStyle: {

                                normal: {

                                    color: function(params) {

                                        // build a color map as your need.

                                        var colorList = [

                                          '#fe4f4f','#fead33','#feca2b','#fef728','#c5ee4a',

                                           '#87ee4a','#46eda9','#47e4ed','#4bbbee','#7646d8',

                                           '#924ae2','#C6E579','#F4E001','#F0805A','#26C0C0'

                                        ];

                                        return colorList[params.dataIndex]

                                    },

                                    /*信息显示方式*/

                                    label: {

                                        show: true,

                                        position: 'top',

                                        formatter: '{b}\n{c}'

                                    }

                                }

                            },

                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]

                        },

                        {

                            name:'折线',

                            type:'line',

                            itemStyle : {  /*设置折线颜色*/

                                normal : {

                                   /* color:'#c4cddc'*/

                                }

                            },

                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]

                        }

                    ]

            };

            // 基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('main'));

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option); 

        </script>

    </body>

</html>

效果图如下

 

 

 

小飞侠-2
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts简单折线/柱状图混合实例
Mentina的小屋
04-18 7493
    前段时间面试+学校项目占用了小生很大一部分时间，博客也没有在记录了。在这样下去上个月获得的“持之以恒”勋章就要被收回去了(ಥ﹏ಥ)    为了勋章，今日小生特地爬上来整理、记录最近做项目新学的可视化库——Echarts//=======================================================================一、Echarts简介Ech...
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
热门推荐
黑木令之佛性
07-06 1万+
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 1. 使用 echarts 版本: “echarts”: “^4.3.0” 2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S 3. 在 main.js 入口文件中全局引入: 1. impo
echarts组合层叠柱状和折线并可缩放图
元元猿的博客
10-09 2271
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表
最新发布
wqqstudy的博客
05-22 855
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表 利用某地区一年的降水量和蒸发量数据绘制双y轴的折线图与柱状图混搭图表，
echarts折线图和柱状图结合绘制
南北极之间
09-14 7787
代码： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147,.
【echarts】柱图+折线图
xilejie的博客
04-30 1296
// 数据项 powerUse: { realTime: [1, 2, 4, 6], history: [9, 9, 3, 4], dataX: ['2时', '4时', '6时'] } drawChart2() { let myChartContainer4 = document.getElementById("chartContainer2"); if (myChartContainer4) { this.echart2 = this.$echa
带阴影及动态效果的折线图（基于echarts.js）
06-21
- **echarts**：Echarts是一个基于JavaScript的图表库，提供多种图表类型，如折线图、柱状图、饼图等，以及丰富的交互功能。 - **区域图**：虽然标题中没有明确提到区域图，但Echarts中的区域图（area chart）和折线...
echart2.0官方文档
12-19
11. **组合图表**：ECharts允许在一个图表区域内组合多种图表类型，如柱状图与折线图的混合，以更直观地展示数据。 12. **自定义视觉映射（visualMap）**：可以将数据值映射到视觉元素（颜色、大小等），以增强数据...
screenViewer_大屏可视化_echart_
09-29
ECharts是一款基于JavaScript的数据可视化库，支持丰富的图表类型，如柱状图、折线图、饼图等，能够帮助用户直观地展示复杂数据。 【描述】中的"使用百度的echart画各种图形"意味着该项目的核心是通过ECharts API来...
python pyecharts 实现一个文件绘制多张图
09-16
在给出的例子中，我们创建了四个不同类型的图表：`Bar`（柱状图）、`Line`（折线图）、`Scatter`（散点图）和`EffectScatter`（动态散点图）。每种图表都通过`add`方法添加数据，并设置了相应的属性，如`title`、`...
echarts 折线图和柱状图组合示例
wsqzero0的博客
09-22 784
echarts 折线柱状图
echarts 一个图表中同时显示柱状图和折线图
yinge0508的博客
04-02 3969
先看效果图 <template> <!-- 工贸库存组件 --> <div id="main"></div> </template> <script> export default { data() { return { myChart: null, option: null...
echarts柱状图大小显示_echarts 折线图，柱状图集一体的tooltip自定义显示
weixin_39637370的博客
12-20 274
又到了一波总结的时候了，今天我要总结的效果要这样，一个图里要有折线图，柱状图，然后还要有提示框，我这里面折线图和柱状图所代表的都是相同的数据，如果折线图和柱状图同时存在，那么提示框只取折线或柱状图里面的数据一种出来显示。最后我会提出gitHub地址改造前.gif改造后.gif从上面我们可以看出来，改造后的样子满足了我们的需求。代码如下content="maximum-scale=1.0,minim...
Echarts-画叠加柱状图，双折线图
08-24 1321
导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> js如下 loadhyzsxygpsldjzzt_pjjlrzxt(); function loadhyzsxygpsldjzzt_pjjlrzxt(){ $.ajax({...
java+echart（折线图和柱状图显示）
十一年
10-22 3050
项目中用到了折线图和柱状图来展示数据，直接上代码。 后台： 这是柱状图： List&lt;UserResponse&gt; aa = this.getData(); this.userResponseList = aa; Result&lt;Object&gt; result = new Result&lt;&gt;(); Map&lt;String, Object&gt; returnD...
echarts 柱状图＋折线图
bidepanm的博客
09-27 4985
const barLineSymbolImg = [require(’…/…/…/…/…/images/components/app/xxx/icon-1.png’), require(’…/…/…/…/…/images/components/app/xxx/icon-2.png’)]; // 导出模块 export default { props: { // 需要传递的数据 data: { type: Array, default() { return [ { name: ‘北京北京北京北京北京北京北京’
echart基本折线图/柱状图示例
zongzi494的博客
07-18 1582
echarts
Echarts柱状图与折线图的基本使用
NewxCJY的博客
12-18 7033
Echarts柱形图与折线图的使用
react echart 柱状折线图
05-31
以上代码配置了一个带有标题、图例、提示框、两个坐标轴、柱状系列和折线系列的柱状折线图。 5. 渲染图表 最后，在 render 方法中，渲染一个 div 容器，并通过 ref 属性指定其引用，代码如下： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值