vue+highCharts---一些常用的设置

小咪咪 2023-01-15 03:47 103阅读 0赞

## 此文章专门用来跟踪记录vue+highCharts在使用过程中的一些常见的需求设置。本人每次开发图表的时候，看官方文档脑壳都大了，属性太多，密密麻麻的，根本记不住。所以整理一些常见的功能实现方式，方便自己今后查阅。（后续会根据实际情况不断更新） ##

## 1、隐藏右下角logo ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

xAxis:{ ...},
    yAxis:{ ...},
    credits: { 
    		enabled: false// 隐藏右下角水印
    	}

### 2、隐藏横线网格 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]

yAxis:{ 
    		gridLineColor: 'transparent' //颜色改成透明色
    	}

### 3、显示y轴线 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]

yAxis:{ 
    		lineWidth: 1
    	}

### 4、自定义轴线颜色和文字颜色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 3]

xAxis:{ 
    		  lineColor: 'red',
              labels: { 
                style: { 
                  color: 'red'
                }
              }
    	}

### 5、自定义线条颜色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 4]

yAxis:{ ...},
    series: [{ 
    		data: [...],
    		color:'red'
    	}]

### 6、隐藏数据点marker ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 5]

yAxis:{ ...},
    series: [{ 
    		data: [...],
    		marker: { 
                enabled: false
            }
    	}]

### 7、指定分区显示不同的颜色或者线条样式 [官网在线例子][Link 1] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 6]

yAxis:{ ...},
    series: [{ 
    		data: [...],
    		zoneAxis: 'x',
    		zones: [{ 
    			value: 8
    		}, { 
    			dashStyle: 'dot',
    			color: {  //设置颜色为渐变色，渐变色效果需要面积图才明显
                  linearGradient: { 
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                  },
                  stops: [
                    [0, 'red'],
                    [0.9, '#303642']
                  ]
                }
    		}]
    	}]

### 8、自定义图表背景颜色 ###

chart: { 
              backgroundColor: '#303642',
              type: 'spline'
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/0e7cc43f68cb4aec91412fb21396bb2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/68ced48583a142099f78a4d7514c7e79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221022/44002d2d8b4b4603bdf71ae161f6cc13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221022/98794251b09e4fb5a4e5a066398b3107.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 4]: /images/20221022/f593e58440a8435686c3db5e714ddf48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 5]: /images/20221022/48cb9800ae364114bd07c3ceddbeac62.png
[Link 1]: https://jshare.com.cn/highcharts/R4Jmaw/1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 6]: /images/20221022/2adc2187a337465bbdd53b99c5126c79.png