vue使用Highcharts图表

发布时间:2021-06-02 09:19:06编辑:admin阅读(93)

    一、概述

    Highcharts 是一个制作图表的纯 Javascript 类库,主要特性如下:

    • 兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;

    • 对个人用户完全免费;

    • 纯 JS,无 BS;

    • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼状图、散布图;

    • 跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用,它只需要三个文件:一个是 Highcharts 的核心文件 highcharts.js,还有 a canvas emulator for IE 和 Jquery 类库或者 MooTools 类库;

    • 提示功能:鼠标移动到图表的某一点上有提示信息;

    • 放大功能:选中图表部分放大,近距离观察图表;

    • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;

    • 时间轴:可以精确到毫秒;

     

    Highcharts演示:https://www.highcharts.com.cn/demo/highcharts

     

    二、安装Highcharts

    官方文档:https://www.highcharts.com.cn/docs/highcharts-vue

     

    安装模块

    npm install highcharts
    npm install highcharts-vue

    注意:官方文档,只写了highcharts-vue。实际情况下,还需要安装highcharts,用来导入一些依赖模块。

     

    注册

    局部注册

    若仅用于特定组件,请使用局部注册方法。首先,您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象:

    import {Chart} from 'highcharts-vue'

    然后,您需要在 Vue 实例配置中注册它,即在 components 部分中

    {
        components: {
            highcharts: Chart
        }
    }

     

    配置

    如果您已经完成上述任务之一(导入和注册组件),它允许您在应用程序中使用 Highcharts-Vue 组件,只需要添加 <highcharts> 元素,而且必须通过它的 :options 参数传递图表配置对象

    <highcharts :options="chartOptions"></highcharts>

    例如:

    new Vue({
        data() {
            return {
                chartOptions: {
                    series: [{
                        data: [1, 2, 3] // sample data
                    }]
                }
            }
        }
    })


    三、使用Highcharts

    折线图

    基础折线图:https://www.highcharts.com.cn/demo/highcharts/line-basic

    点击编辑源代码,复制下图红色部分代码

    1.png

     

    到vue文件中即可。

     

    test.vue

    <template>
      <div>
        <highcharts :options="chartOptions1"></highcharts>
      </div>
    </template>
    
    <script>
      import {Chart} from 'highcharts-vue'
      import Highcharts from 'highcharts'
      import exportingInit from 'highcharts/modules/exporting'
    
      exportingInit(Highcharts)
    
      export default {
        name: "test",
        components: {
          highcharts: Chart
        },
        data() {
          return{
            chartOptions1: {
              title: {
                text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
              },
              subtitle: {
                text: '数据来源:thesolarfoundation.com'
              },
              yAxis: {
                title: {
                  text: '就业人数'
                }
              },
              legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
              },
              plotOptions: {
                series: {
                  label: {
                    connectorAllowed: false
                  },
                  pointStart: 2010
                }
              },
              series: [{
                name: '安装,实施人员',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
              }, {
                name: '工人',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
              }, {
                name: '销售',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
              }, {
                name: '项目开发',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
              }, {
                name: '其他',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
              }],
              responsive: {
                rules: [{
                  condition: {
                    maxWidth: 500
                  },
                  chartOptions: {
                    legend: {
                      layout: 'horizontal',
                      align: 'center',
                      verticalAlign: 'bottom'
                    }
                  }
                }]
              }
            }
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

     

    打开页面,效果如下:

    1.png

     

    如果需要去除右下角的水印,以及右上角的打印以及下载功能。添加

    credits: {
      enabled: false
    },
    exporting: { enabled:false },

     

    test.vue完整代码如下:

    <template>
      <div>
        <highcharts :options="chartOptions1"></highcharts>
      </div>
    </template>
    
    <script>
      import {Chart} from 'highcharts-vue'
      import Highcharts from 'highcharts'
      import exportingInit from 'highcharts/modules/exporting'
    
      exportingInit(Highcharts)
    
      export default {
        name: "test",
        components: {
          highcharts: Chart
        },
        data() {
          return{
            chartOptions1: {
              credits: {
                enabled: false
              },
              exporting: { enabled:false },
              title: {
                text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
              },
              subtitle: {
                text: '数据来源:thesolarfoundation.com'
              },
              yAxis: {
                title: {
                  text: '就业人数'
                }
              },
              legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
              },
              plotOptions: {
                series: {
                  label: {
                    connectorAllowed: false
                  },
                  pointStart: 2010
                }
              },
              series: [{
                name: '安装,实施人员',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
              }, {
                name: '工人',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
              }, {
                name: '销售',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
              }, {
                name: '项目开发',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
              }, {
                name: '其他',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
              }],
              responsive: {
                rules: [{
                  condition: {
                    maxWidth: 500
                  },
                  chartOptions: {
                    legend: {
                      layout: 'horizontal',
                      align: 'center',
                      verticalAlign: 'bottom'
                    }
                  }
                }]
              }
            }
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>


     

    刷新页面,效果如下:

    1.png

    旭日图

    注意:旭日图需要加载sunburst.js,因此需要在vue中,导入一下。

     

    test.vue

    <template>
      <div>
        <highcharts :options="chartOptions1"></highcharts>
      </div>
    </template>
    
    <script>
      import {Chart} from 'highcharts-vue'
      import Highcharts from 'highcharts'
      import exportingInit from 'highcharts/modules/exporting'
      exportingInit(Highcharts)
    
      import sunburstInit from 'highcharts/modules/sunburst'
      sunburstInit(Highcharts)
    
      export default {
        name: "test",
        components: {
          highcharts: Chart
        },
        data() {
          return{
            chartOptions1: {
              credits: {
                enabled: false
              },
              exporting: { enabled:false },
              chart: {
                height: '100%'
              },
              title: {
                text: '2017 世界人口分布'
              },
              subtitle: {
                text: ''
              },
              series: [{
                type: "sunburst",
                data: [
                  {
                    "id":"0.0",
                    "parent":"",
                    "name":"The World"
                  },
                  {
                    "id":"1.3",
                    "parent":"0.0",
                    "name":"亚洲",
                    "color":"#FFB6C1"
                  },
                  {
                    "id":"1.1",
                    "parent":"0.0",
                    "name":"非洲",
                    "color":"#DB7093"
                  },
                  {
                    "id":"1.2",
                    "parent":"0.0",
                    "name":"美洲",
                    "color":"#DA70D6"
                  },
                  {
                    "id":"1.4",
                    "parent":"0.0",
                    "name":"欧洲",
                    "color":"#FF00FF"
                  },
                  {
                    "id":"1.5",
                    "parent":"0.0",
                    "name":"大洋洲",
                    "color":"#BA55D3"
                  },
                  {
                    "id":"2.1",
                    "parent":"1.1",
                    "name":"东非"
                  },
                  {
                    "id":"3.20",
                    "parent":"2.1",
                    "name":"塞舌尔群岛",
                    "value":94737
                  },
                  {
                    "id":"2.5",
                    "parent":"1.1",
                    "name":"西非"
                  },
                  {
                    "id":"3.42",
                    "parent":"2.5",
                    "name":"尼日利亚",
                    "value":190886311
                  },
                  {
                    "id":"3.36",
                    "parent":"2.3",
                    "name":"西撒哈拉",
                    "value":552628
                  },
                  {
                    "id":"2.4",
                    "parent":"1.1",
                    "name":"南美洲"
                  },
                  {
                    "id":"3.37",
                    "parent":"2.4",
                    "name":"南非",
                    "value":56717156
                  },
                  {
                    "id":"2.9",
                    "parent":"1.2",
                    "name":"南美洲"
                  },
                  {
                    "id":"3.98",
                    "parent":"2.9",
                    "name":"巴西",
                    "value":209288278
                  },
                  {
                    "id":"2.8",
                    "parent":"1.2",
                    "name":"北美洲"
                  },
                  {
                    "id":"3.93",
                    "parent":"2.8",
                    "name":"美国",
                    "value":324459463
                  },
                  {
                    "id":"3.97",
                    "parent":"2.8",
                    "name":"圣皮埃尔和密克隆",
                    "value":6320
                  },
                  {
                    "id":"2.7",
                    "parent":"1.2",
                    "name":"中美洲"
                  },
                  {
                    "id":"3.85",
                    "parent":"2.7",
                    "name":"墨西哥",
                    "value":129163276
                  },
                  {
                    "id":"2.6",
                    "parent":"1.2",
                    "name":"加勒比海"
                  },
                  {
                    "id":"3.83",
                    "parent":"2.6",
                    "name":"安圭拉",
                    "value":14909
                  },
                  {
                    "id":"3.84",
                    "parent":"2.6",
                    "name":"蒙特塞拉特",
                    "value":5177
                  },
                  {
                    "id":"2.13",
                    "parent":"1.3",
                    "name":"南亚"
                  },
                  {
                    "id":"3.144",
                    "parent":"2.13",
                    "name":"马尔代夫",
                    "value":436330
                  },
                  {
                    "id":"2.11",
                    "parent":"1.3",
                    "name":"东亚"
                  },
                  {
                    "id":"3.117",
                    "parent":"2.11",
                    "name":"中国",
                    "value":1441131303
                  },
                  {
                    "id":"3.118",
                    "parent":"2.11",
                    "name":"日本",
                    "value":127484450
                  },
                  {
                    "id":"3.121",
                    "parent":"2.11",
                    "name":"台湾省(中国)",
                    "value":23626456
                  },
                  {
                    "id":"3.123",
                    "parent":"2.11",
                    "name":"蒙古",
                    "value":3075647
                  },
                  {
                    "id":"2.12",
                    "parent":"1.3",
                    "name":"东南亚"
                  },
                  {
                    "id":"3.135",
                    "parent":"2.12",
                    "name":"文莱",
                    "value":428697,
                    "color":""
                  },
                  {
                    "id":"2.14",
                    "parent":"1.3",
                    "name":"西亚"
                  },
                  {
                    "id":"3.145",
                    "parent":"2.14",
                    "name":"土耳其",
                    "value":80745020
                  },
                  {
                    "id":"3.161",
                    "parent":"2.14",
                    "name":"巴林王国",
                    "value":1492584
                  },
                  {
                    "id":"2.15",
                    "parent":"1.4",
                    "name":"东欧"
                  },
                  {
                    "id":"2.16",
                    "parent":"1.4",
                    "name":"北欧"
                  },
                  {
                    "id":"3.173",
                    "parent":"2.16",
                    "name":"英国",
                    "value":66181585
                  },
                  {
                    "id":"3.185",
                    "parent":"2.16",
                    "name":"法罗群岛",
                    "value":49290
                  },
                  {
                    "id":"3.201",
                    "parent":"2.17",
                    "name":"梵蒂冈城",
                    "value":792
                  },
                  {
                    "id":"3.210",
                    "parent":"2.18",
                    "name":"列支敦士登",
                    "value":37922
                  },
                  {
                    "id":"2.19",
                    "parent":"1.5",
                    "name":"澳大利亚和新西兰"
                  },
                  {
                    "id":"2.20",
                    "parent":"1.5",
                    "name":"美拉尼西亚"
                  },
                  {
                    "id":"3.217",
                    "parent":"2.20",
                    "name":"瓦努阿图",
                    "value":276244
                  },
                  {
                    "id":"2.21",
                    "parent":"1.5",
                    "name":"密克罗尼西亚"
                  },
                  {
                    "id":"3.224",
                    "parent":"2.21",
                    "name":"瑙鲁",
                    "value":11359
                  },
                  {
                    "id":"2.22",
                    "parent":"1.5",
                    "name":"波利尼西亚"
                  },
                  {
                    "id":"3.225",
                    "parent":"2.22",
                    "name":"法属波利尼西亚",
                    "value":283007
                  }
                ],
                allowDrillToNode: true,
                cursor: 'pointer',
                dataLabels: {
                  /**
                   * A custom formatter that returns the name only if the inner arc
                   * is longer than a certain pixel size, so the shape has place for
                   * the label.
                   */
                  formatter: function () {
                    var shape = this.point.node.shapeArgs;
    
                    var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);
                    var perimeter = 2 * Math.PI * shape.innerR;
    
                    var innerArcPixels = innerArcFraction * perimeter;
    
                    if (innerArcPixels > 16) {
                      return this.point.name;
                    }
                  }
                },
                levels: [{
                  level: 2,
                  colorByPoint: true,
                  dataLabels: {
                    rotationMode: 'parallel'
                  }
                },
                  {
                    level: 3,
                    colorVariation: {
                      key: 'brightness',
                      to: -0.5
                    }
                  }, {
                    level: 4,
                    colorVariation: {
                      key: 'brightness',
                      to: 0.5
                    }
                  }]
    
              }],
              tooltip: {
                headerFormat: "",
                pointFormat: '<b>{point.name}</b>:<b>{point.value}</b>'
              }
            }
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>


    效果图如下:

    1.png

     


关键字