Vue3---集成Highcahrts(普通图表 3D图可下钻图等)

àì夳堔傛蜴生んèń 2022-10-29 10:27 600阅读 0赞

*  安装highcharts

npm install highcharts --save

*  普通图表(只需导入Highcahrts)

<template>
      <div id="chart"></div>
    </template>
    <script>
    import { defineComponent, onMounted } from "vue";
    import Highcharts from "highcharts";
    
    export default defineComponent({
      name: 'Index',
      setup() {
        onMounted(() => {
          Highcharts.chart('chart', {
            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'
                    }
                  }
                }
              ]
            },
          })
        })
        return {}
      },
    });
    </script>

*  3D图表(除了导入Highcharts外，还需要导入3D模块)

<template>
      <div id="chart"></div>
    </template>
    <script>
    import { defineComponent, onMounted } from "vue";
    import Highcharts from "highcharts";
    import Highcharts3D from "highcharts/highcharts-3d";
    
    export default defineComponent({
      name: "Index",
      setup() {
        Highcharts3D(Highcharts); // 3D
    
        onMounted(() => {
          Highcharts.chart('chart', {
            chart: {
              type: 'column',
              margin: 75,
              options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70,
                viewDistance: 100,
                frame: {
                  bottom: {
                    size: 10
                  },
                  side: {
                    size: 1,
                    color: 'transparent'
                  },
                  back: {
                    size: 1,
                    color: 'transparent'
                  }
                },
              },
            },
            title: {
              text: '包含空值的3D柱状图'
            },
            subtitle: {
              text: '请注意值为 0 和 null 的区别'
            },
            plotOptions: {
              column: {
                depth: 25,
              }
            },
            xAxis: {
              categories: Highcharts.getOptions().lang.shortMonths
            },
            yAxis: {
              title: {
                text: null
              }
            },
            series: [
              {
                name: '销售',
                data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
              }
            ]
          })
        })
        return {}
      },
    })
    </script>

*  可下钻图表(除了导入Highcharts外，还需要导入可下钻模块drilldown)

<template>
      <div id="chart"></div>
    </template>
    <script>
    import { defineComponent, onMounted } from "vue";
    import Highcharts from "highcharts";
    import Drilldown from "highcharts/modules/drilldown";
    
    export default defineComponent({
      name: "Index",
      setup() {
        Drilldown(Highcharts); // 可下钻
    
        onMounted(() => {
          Highcharts.chart("chart", {
            chart: {
              type: "column",
            },
            title: {
              text: "2015年1月-5月，各浏览器的市场份额",
            },
            subtitle: {
              text:
                '点击可查看具体的版本数据，数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.',
            },
            xAxis: {
              type: "category",
            },
            yAxis: {
              title: {
                text: "总的市场份额",
              },
            },
            legend: {
              enabled: false,
            },
            plotOptions: {
              series: {
                borderWidth: 0,
                dataLabels: {
                  enabled: true,
                  format: "{point.y:.1f}%",
                },
              },
            },
            tooltip: {
              headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
              pointFormat:
                '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>',
            },
            series: [
              {
                name: "浏览器品牌",
                colorByPoint: true,
                data: [
                  {
                    name: "Microsoft Internet Explorer",
                    y: 56.33,
                    drilldown: "Microsoft Internet Explorer",
                  },
                  {
                    name: "Chrome",
                    y: 24.03,
                    drilldown: "Chrome",
                  },
                  {
                    name: "Firefox",
                    y: 10.38,
                    drilldown: "Firefox",
                  },
                  {
                    name: "Safari",
                    y: 4.77,
                    drilldown: "Safari",
                  },
                  {
                    name: "Opera",
                    y: 0.91,
                    drilldown: "Opera",
                  },
                  {
                    name: "Proprietary or Undetectable",
                    y: 0.2,
                    drilldown: null,
                  },
                ],
              },
            ],
            drilldown: {
              series: [
                {
                  name: "Microsoft Internet Explorer",
                  id: "Microsoft Internet Explorer",
                  data: [
                    ["v11.0", 24.13],
                    ["v8.0", 17.2],
                    ["v9.0", 8.11],
                    ["v10.0", 5.33],
                    ["v6.0", 1.06],
                    ["v7.0", 0.5],
                  ],
                },
                {
                  name: "Chrome",
                  id: "Chrome",
                  data: [
                    ["v40.0", 5],
                    ["v41.0", 4.32],
                    ["v42.0", 3.68],
                    ["v39.0", 2.96],
                    ["v36.0", 2.53],
                    ["v43.0", 1.45],
                    ["v31.0", 1.24],
                    ["v35.0", 0.85],
                    ["v38.0", 0.6],
                    ["v32.0", 0.55],
                    ["v37.0", 0.38],
                    ["v33.0", 0.19],
                    ["v34.0", 0.14],
                    ["v30.0", 0.14],
                  ],
                },
                {
                  name: "Firefox",
                  id: "Firefox",
                  data: [
                    ["v35", 2.76],
                    ["v36", 2.32],
                    ["v37", 2.31],
                    ["v34", 1.27],
                    ["v38", 1.02],
                    ["v31", 0.33],
                    ["v33", 0.22],
                    ["v32", 0.15],
                  ],
                },
                {
                  name: "Safari",
                  id: "Safari",
                  data: [
                    ["v8.0", 2.56],
                    ["v7.1", 0.77],
                    ["v5.1", 0.42],
                    ["v5.0", 0.3],
                    ["v6.1", 0.29],
                    ["v7.0", 0.26],
                    ["v6.2", 0.17],
                  ],
                },
                {
                  name: "Opera",
                  id: "Opera",
                  data: [
                    ["v12.x", 0.34],
                    ["v28", 0.24],
                    ["v27", 0.17],
                    ["v29", 0.16],
                  ],
                },
              ],
            },
          });
        });
        return {};
      },
    });
    </script>

*  其他图表类似，导入对应模块函数，执行函数即可：模块函数(Highcharts)