vue+highcharts的基本图标使用

最新推荐文章于 2024-08-16 07:45:12 发布

web前端又菜又白

最新推荐文章于 2024-08-16 07:45:12 发布

阅读量306

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45127157/article/details/125198749

版权

hightcharts官网网址：Highcharts网址

步骤一：在创建的vue项目中安装npm包

npm install highcharts --save

步骤二：在main.js文件中import相关包

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

步骤三：找到components组件文件夹，写一个chart.vue组件，代码如下

<template>
  		<div>
    		<div :id="id"  :option="option"></div>
  		</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
 	props: {
   		id: {
   		     type: String
  			},
    	option: {
    	     type: Object
   			}
  		},
  	mounted() {
   		HighCharts.chart(this.id,this.option)
 		}
	}
</script>

步骤四：找到要使用图标的页面，引入chart组件，在页面中写入如下代码：

<template>
  <div id="container" style="width: 400px; height: 400px">
    <hchart></hchart>
  </div>
</template>
<script>
import hchart from "@/components/chart";
import HighCharts from "highcharts";
export default {
  mounted() {
    HighCharts.chart("container", this.option);
  },
  components: {
    hchart,
  },
  data() {
    return {
      option: {
       //写入配置数据
      },
    };
  },
};
</script>

饼图示例：

<template>
  <div id="container" style="width: 400px; height: 400px">
    <hchart></hchart>
  </div>
</template>
<script>
import hchart from "@/components/chart";
import HighCharts from "highcharts";
export default {
  mounted() {
    HighCharts.chart("container", this.option);
  },
  components: {
    hchart,
  },
  data() {
    return {
      option: {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "2018 年浏览器市场份额",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [
              {
                name: "Chrome",
                y: 61.41,
                sliced: true,
                selected: true,
              },
              {
                name: "Internet Explorer",
                y: 11.84,
              },
              {
                name: "Firefox",
                y: 10.85,
              },
              {
                name: "Edge",
                y: 4.67,
              },
              {
                name: "Safari",
                y: 4.18,
              },
              {
                name: "Other",
                y: 7.05,
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

结果展示：