vue数据可视化Highcharts

最新推荐文章于 2024-09-25 21:47:28 发布

原创最新推荐文章于 2024-09-25 21:47:28 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Highcharts库配置复杂的图表，包括导入不同模块、设置图表类型、宽度及标题等基本配置，并演示了如何更新x轴类别、系列数据及标题等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/ecmascript-6">
   import Highcharts from 'highcharts/highstock';
   import HighchartsMore from 'highcharts/highcharts-more';
   import HighchartsDrilldown from 'highcharts/modules/drilldown';
   import Highcharts3D from 'highcharts/highcharts-3d';

   HighchartsMore(Highcharts);
   HighchartsDrilldown(Highcharts);
   Highcharts3D(Highcharts);

  export default {
     methods:{
        loadCharts(){
          //参数设置
           var options={
             chart: {
               type: 'column',
               width:500,
             },
             credits: {
               text: '文本',
               href: 'http://文本指向链接'
             },
             title: {
               text: '标题'
             },
             xAxis:{
               title:{
                 text:''
               },
               categories: ['2015年', '2016年', '2017年']
             },
             yAxis:{
               title:{
                 text:''
               }
             },
             legend:{
               enabled:false
             },
             series: [{
               data: [],//y轴数据
               name:' '
             }],
             plotOptions: {
               column: {
                 depth: 1000
               },
               line: {
                 dataLabels: {
                   enabled: true          // 开启数据标签
                 },
                 enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
               },
               series: {
                 borderWidth: 0,
                 dataLabels: {
                   enabled: true,
                   format: '{point.y:f}元'//柱上面的标题
                 }
               }
             },
             exporting:{
               enabled:true
             }
           };

           this.chart=Highcharts.chart(document.getElementById('charts'),options);
           //具体参数配置查看highCharts官网
           this.chart.update({
             xAxis:{
               categories: ['分类1', '分类2', '分类3', '分类4'],
             },
             series:{
               data:this.getdata(this.dataResult.data_list_01[0]),
             },
             title:{
               text:this.object_name+'参赛基本情况'
             },
             plotOptions:{
               series: {
                 borderWidth: 0,
                 dataLabels: {
                   enabled: true,
                   format: '{point.y:f}位'//柱上面的标题
                 }
               }
             },
           });
        }
     }
  }
</script>