vue引入highCharts并使用

朱雀 2022-10-25 14:20 147阅读 0赞

# 1、安装 #

npm install highcharts --save

# 2、components目录下新建一个HighchartsComponent.vue组件 #

![在这里插入图片描述][20210201104650806.png]

<template>
      <div class="x-bar">
        <div :id="id"  :style="setStyle()" :option="option" style="width: 100%"></div>
      </div>
    </template>
    <script>
      import HighCharts from 'highcharts'
      export default { 
        // 验证类型
        props: { 
          height:{ 
            type:Number,
            default:310
          },
          id: { 
            type: String
          },
          option: { 
            type: Object
          }
        },
        watch: { 
          option (val) { 
            console.log('option变化了')
            HighCharts.chart(this.id,this.option);
          },
        },
        mounted() { 
          HighCharts.chart(this.id,this.option)
        },
        methods:{ 
          setStyle(){ 
            return { 
              height: this.height+"px"
            }
          },
          refresh(){ 
            HighCharts.chart(this.id,this.option)//刷新图表
          }
        }
      }
    </script>

# 3、使用 #

## ！！注意：动态更新option之后，一定要主动调用刷新图表的方法 ##

## this.$refs\[‘barChartx’\].refresh()//刷新统计图 ##

<x-chart style="padding-right: 60px" v-loading="barLoading" :element-loading-text="barLoadingTxt" id="noise-highcharts-bar-x" ref="barChartx" :option="barOption">
    </x-chart>
    
    import XChart from '@/components/HighchartsComponent'
    
    components: {XChart}

option仅供参考，请根据项目需求自定义
    
    barOption: { 
              chart: { 
                type: 'spline',
                marginRight:120
              },
              title: { 
                text: ''
              },
              xAxis: { 
                crosshair: true,
                title: { 
                  text: '频率（Hz）'
                },
              },
              yAxis: { 
                title: { 
                  text: '幅度'
                },
                lineWidth: 1,
                // plotLines: [{ 
                // color: 'red', //线的颜色，定义为红色
                // dashStyle: 'dashed', //默认值，这里定义为实线
                // value: 0.9, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                // width: 2 //标示线的宽度，2px
                // }]
    
                // min:0 ,//最小值
                // tickInterval:1, //间隔
                // max:4, //最大值
              },
              tooltip: { 
                formatter: function () { 
                  var s = '<b>幅度：</b>';
                  for (let i in this.points) { 
                    s += '<br/>' + this.points[i].series.name + ': ' +
                        this.points[i].y;
                  }
                  return s;
                },
                shared: true
              },
              credits: { 
                enabled: false//隐藏右下角水印
              },
              legend: { 
                enabled: true,
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'top',
                symbolPadding: 10,//图标和文字的距离
                symbolWidth: 30,//图标的宽度
                itemMarginBottom: 20,
                padding: 0,
                rtl: true,//图标文字左右交换
                itemStyle: { 
                  fontSize: '18px'
                }
              },
              plotOptions: { 
                column: { 
                  pointPadding: 0.2,
                  borderWidth: 0,
                },
                series: { 
                  animation: false,//去除渲染动画
                  turboThreshold: 0//不限制点数
                }
              },
              series: [
                { 
                  name: '切向',
                  data: [],
                  // data: [{x: 1, y: 0.9}, {x: 2, y: 2}, {x: 3, y: -1.5}, {x: 4, y: 1.7}, {x: 5, y: -2}],
                  color:'#f7a35c',
                  marker:{ 
                    // symbol:'circle'
                  },
                  zones: [{ 
                    // value: 0.9
                    value: 50
                  }, { 
                    color: 'red'
                  },
                  ]
                }, { 
                  name: '径向',
                  data: [],
                  // data: [{x: 1, y: 0.2}, {x: 2, y: -1.7}, {x: 3, y: 2}, {x: 4, y: 0.5}, {x: 5, y: -0.6}],
                  marker:{ 
                    // symbol:'circle'
                  },
                  zones: [{ 
                    // value: 0.9
                    value: 50
                  }, { 
                    color: 'red'
                  },
                  ]
                }, { 
                  name: '轴向',
                  data: [],
                  // data: [{x: 1, y: -0.5}, {x: 2, y: 4.8}, {x: 3, y: -3.2}, {x: 4, y: -0.7}, {x: 5, y: 1.3}],
                  marker:{ 
                    // symbol:'circle'
                  },
                  zones: [{ 
                    // value: 0.9
                    value: 50
                  }, { 
                    color: 'red'
                  },
                  ]
                }
              ]
            }

[20210201104650806.png]: /images/20221024/812b66a985704b15b844d047c2269d19.png