随笔- 310  文章- 1  评论- 0  阅读- 85655 
echarts 折线图
?
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./sources/echarts/echarts.min.js"></script>
</head>
<body >
 
    <div id="main" style="width: 100%;height: 500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  
        option = {
 
  title: {
          text: '卡拉云新用户激活数据',
          subtext: 'Demo 虚构数据',
          x: 'center'
        },
 
        legend: { // 图例配置选项
          orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
          x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
          y: 'top',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
          data: ['猜想','预期','实际']
        },
         grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '20%', 
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
 
        xAxis: {
          name: '月份',
          type: 'category',
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
        },
 
        yAxis: {
          name: '人次',
          type: 'value',
          min:0, // 配置 Y 轴刻度最小值
          max:4000,  // 配置 Y 轴刻度最大值
          splitNumber:7,  // 配置 Y 轴数值间隔
        },
 
        series: [
          {
            name: '猜想',
            data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
            type: 'line',
            symbolSize: function(value) {  // 点的大小跟随数值增加而变大
              return value / 150;
            },
            symbol:'circle',           
            itemStyle: {
              normal: {
                label : {
                  show: true 
                },
                lineStyle:{
                  color: 'rgba(0,0,0,0)'// 折线颜色设置为0，即只显示点，不显示折线
                }
              }
            }
          },
 
          {
            name: '预期',
            data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
            type: 'line',
            symbolSize:8,  //设置折线上圆点大小
            itemStyle:{
              normal:{
                label : {
                show: true // 在折线拐点上显示数据
                },
                lineStyle:{                
                  width:3,  // 设置虚线宽度
                  type:'dotted'  // 虚线'dotted' 实线'solid'
                }
              }
            }
          },
 
          {
            name: '实际',
            data: [1107,'','','',1647,1570,1343,1757,2547,2762,0,3665],
            type: 'line',
            symbol: 'circle', // 实心圆点
            smooth: 0.5, // 设置折线弧度
            symbolSize:8,  //设置折线上圆点大小
            connectNulls:true, //是否连接空数据
            label: {
                    show: true,
                    position: 'bottom',
                    formatter: '{c}%',
                    //color: '#00BFFF',
                    color: 'white',
                },
            lineStyle:{                
                  width:5,  // 设置虚线宽度
                  type:'solid'  // 虚线'dotted' 实线'solid'
                }
          }
        ],
        color: ['#3366CC', '#FFCC99','#99CC33'] // 三个折线的颜色
}
         
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

　

 

 posted on   boye169  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
· echarts 双y轴坐标(直方图-折线图)
· echart 双坐标 柱状图-折线图
· echarts折线图
· Echarts 折线图
· echarts折线图 多个
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
历史上的今天：
2022-05-19 typescript https上传文件
2022-05-19 typescript https请求
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛