echarts折线图的使用和相关属性

刺骨的言语ヽ痛彻心扉 2023-05-21 07:16 13阅读 0赞

**折线图的使用**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>折线图</title>
        <style> .tongji-header { width: 150px; height: 30px; font-family: MicrosoftYaHei; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; background: linear-gradient(to right, #01ffff, #0f8dff); -webkit-background-clip: text; color: transparent; } .ajqs-body { width: 90%; height: 230px; padding-top: 20px; border: 1px solid #01fffd; overflow: hidden; } #ajqs { width: 98%; height: 200px; margin: 0 auto; } </style>
    </head>
    <body style="background:url(./static/home/images/body_bg.jpg) center top; background-size:100% 100%;">
         <script src="http://221.214.107.45:55899/static/index/js/echarts.min.js"></script>
          <div class="anjian">
              <div class="tongji-header">案件趋势 :</div>
              <div style="margin-top: 5px; margin-bottom: 25px; height: 1px; width: 60px; background: linear-gradient(to right, #01ffff, #0f8dff)">
              </div>
              <div class="ajqs-body">
                  <div id="ajqs"></div>
              </div>
          </div>
            <script type="text/javascript"> var dom4 = document.getElementById("ajqs"); var myChart4 = echarts.init(dom4); var app4 = { }; option4 = { xAxis: { type: 'category', axisLine: { lineStyle: { type: 'solid', color: '01fffd', width: '2' } }, // splitLine:{ // show: true, // X轴线 颜色类型的修改 // lineStyle: { // type: 'dashed', // color: '#04cdf4' // } // }, axisLabel: { interval: 0, textStyle: { fontSize: 10, color: '#fff' }, rotate: -0 }, data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, grid: { left: '3%', right: '4%', bottom: '3%', top: '6%', containLabel: true }, yAxis: { axisLine: { lineStyle: { type: 'solid', color: '#01fffd', width: '2' } }, splitLine: { show: true, // X轴线 颜色类型的修改 lineStyle: { type: 'solid', color: '#04cdf4' } }, axisLabel: { interval: 0, textStyle: { fontSize: 10, color: '#fff' }, rotate: -0 }, type: 'value' }, series: [{ itemStyle: { normal: { color: '#04cdf4', //改变折线点的颜色 lineStyle: { color: '#01fffd' //改变折线颜色 } } }, data: [0, 0.3, 0, 0.6, 0, 0.7, 0, 0, 0.9, 0, 1, 0], type: 'line' }] }; myChart4.setOption(option4, true); window.addEventListener("resize", function () { myChart.resize(); }); </script>
    </body>
    </html>

代码效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]

代码解释和相关属性注释：

**xAxis 表示x轴相关的设置**

xAxis: { 
                        type: 'category',
                        axisLine: { 
                            lineStyle: { 
                                type: 'solid',
                                color: '01fffd',
                                width: '2'
                            }
                        },
                        // splitLine:{ 
                        // show: true, // X轴线 颜色类型的修改
                        // lineStyle: { 
                        // type: 'dashed',
                        // color: '#04cdf4'
                        // }
                        // },
                        axisLabel: { 
                            interval: 0,
                            textStyle: { 
                                fontSize: 10,
                                color: '#fff'
                            },
                            rotate: -0
                        },
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },

1.  xAxis. type = ‘category’ 用于设置x轴的坐标类型  
    相关属性值：  
    1. ‘value’ 数值轴，适用于连续数据。效果为一条连续的直线，下面是效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]
    
        3.	'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据，开始图片效果就是设置，category， 一般常用于该属性
                4.	'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
                5.	log' 对数轴。适用于对数数据。

2 .xAxis. axisLine 这用于设置坐标轴的轴线相关的设置

*  xAxis.axisLine. show = true 用于设置是否显示坐标轴的轴线，默认为true ，值为布尔值
 *  xAxis.axisLine. onZero = true 用于设置x轴或y轴的0刻度是否要重合，只有x轴和y轴都由0刻度，并且以0刻度开始才能生效
 *  xAxis.axisLine. symbol = ‘none’ 用于设置轴线的箭头
    
    1.  默认不显示箭头(就是不设置该属性)，或参数为’none’
    2.  ‘arrow’ 表示两端都显示箭头
    3.  \[‘none’, ‘arrow’\] 表示只在末端显示箭头
 *  xAxis.axisLine. symbolSize = \[10, 15\] ，轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）
 *  xAxis.axisLine. symbolOffset = \[0, 0\]，轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
 *  xAxis.axisLine. lineStyle，用于设置坐标轴轴线的相关样式
    
    1.  color: 用于设置轴线的颜色
    2.  style: 用于设置轴线的样式，比如solid表示直线
    3.  width: 表示轴的粗细

1.  xAxis. splitLine，用于设置分隔线相关的属性，用法和xAxis. axisLine一样，参数和相应属性都一样的
2.  xAxis. axisLabel，用于设置坐标轴刻度标签相应的设置  
    相关属性：  
    1. xAxis.axisLabel. show = true，刻度是否显示  
    2. xAxis.axisLabel. interval = ‘auto’，设置刻度之间的间隔，默认是标签不重叠的间隔显示标签，  
    可 以设置成 0 强制显示所有标签。  
    如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。  
    3. xAxis.axisLabel. inside，刻度标签是否朝外，默认朝外  
    4. xAxis.axisLabel. rotate，刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。  
    5. xAxis.axisLabel. margin = 8，刻度标签与轴线之间的距离，设置的值为数字  
    6. xAxis.axisLabel. color，刻度标签文字的颜色，默认取 axisLine.lineStyle.color  
    7. xAxis.axisLabel. fontWeight = normal，设置文字字体的粗细，值为： ‘normal’，‘bold’，‘bolder’，‘lighter’，100 | 200 | 300 | 400…  
    8. xAxis.axisLabel. fontFamily = ‘sans-serif’，设置文字类型  
    9. xAxis.axisLabel. fontSize = 12，设置文字大小  
    10. xAxis.axisLabel. align，设置文字水平对齐方式，默认为自动。值为： ‘left’，‘center’，right’  
    11. xAxis.axisLabel. verticalAlign，设置文字垂直对齐方式，默认自动。值为：‘top’，‘middle’，‘bottom’  
    12. xAxis.axisLabel. lineHeight，设置行高  
    13. xAxis.axisLabel. backgroundColor = ‘transparent’，设置文字块背景色。  
    14. xAxis.axisLabel. borderColor = ‘transparent’，设置文字块边框颜色  
    15. xAxis.axisLabel. borderWidth，设置文字块边框宽度
3.  grid，设置直角坐标系内绘图网格  
    相关属性
4.  grid. left = ‘10%’，设置grid 组件离容器左侧的距离。top，bottom，right，都是相类似的
5.  grid. containLabel，表示grid 区域是否包含坐标轴的刻度标签。
    
    **containLabel 为 false 的时候**：
    
    grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。  
    这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。  
    **containLabel 为 true 的时候：**

grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。  
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

## yAxis这是设置y轴相关的属性，和x轴一样 ##

**series**用于设置图标的类型

1.  itemStyle，用于设置图像的样式

配置图标和让图标根据屏幕自适应

// 3. 把配置给实例对象
     myChart4.setOption(option4, true);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() { 
        myChart.resize();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/68f909645dda4f3bbb000ea14679a387.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230521/85ac9300bed440c897cd754bb2bfdcfe.png