Vue：使用highCharts

几个注意点：

将highcharts绑定的数据设置为计算属性，使用computed对数据进行监听

在饼图点击事件绑定click的时候,如果使用function进行绑定，则无法使用this获取组件中的数据，因此使用箭头函数。箭头函数没有作用域

click: (e) => {// 更改内容标题if (e["point"]["sliced"]) {// 如果是收起来,显示总数据量this.chartTitle = `<span>总数(处)<br>${this.hazardPointTotal}</span>`;} else {// 如果是打开,显示每类灾害数据量this.chartTitle = `${e.point.name}<br>${e.point.y}`;}
}

<template><div id="compositeLeftTop"><highcharts id="comprehensiveHazardPoint" :options="chartOptions"></highcharts></div>
</template><script>
// 已引入highcharts
import {Chart} from "highcharts-vue";
import {getDifferentHazardPointNum} from "@/service/api";export default {name: "LeftTop",components: {highcharts: Chart,},data() {return {hazardPointArr: [],hazardPointTotal: 0,chartTitle: "",}},created() {// 请求数据this.getHazardPointObj();},computed: {chartOptions() {return {chart: {style: {  // 配置翻页颜色fontSize: '12px',fontWeight: 'bolder',color: '#05CBD1'},backgroundColor: 'rgba(0,0,0,0)', // 设置背景透明色type: 'pie',height: 210,width: 285},legend: {layout: "vertical", // 垂直显示align: "right", // 右对齐labelFormatter: function () {return `<p style="color: white;">${this.name} </p>`}},credits: {enabled: false     //不显示LOGO},title: {floating: true,text: this.chartTitle,x: -65,y: 90,style: {color: '#ffffff',fontSize: '14px'},},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {center: ['50%', '50%'],size: '120%',innerSize: '60%',allowPointSelect: true, // 是否允许鼠标点击数据点cursor: 'pointer',dataLabels: {enabled: false},showInLegend: true,point: {events: {click: (e) => {// 更改内容标题if (e["point"]["sliced"]) {// 如果是收起来,显示总数据量this.chartTitle = `<span>总数(处)<br>${this.hazardPointTotal}</span>`;} else {// 如果是打开,显示每类灾害数据量this.chartTitle = `${e.point.name}<br>${e.point.y}`;}}}},},},series: [{name: '所占比例',colorByPoint: true,data: this.hazardPointArr}]}}},methods: {//发起ajax请求,获取当前角色不同灾害点数量async getHazardPointObj() {let role = "管道"// 同步等待获取数据let res = await getDifferentHazardPointNum(role);if (res.status === 200) {// 如果查询成功,将数据给到组件中预设定的数据this.hazardPointTotal = res.data.total;this.chartTitle = `<span>总数(处)<br>${this.hazardPointTotal}</span>`;for (let item of res.data.rows.values()) {this.hazardPointArr.push({name: item.type,y: Number(item.count)})}}}}
}
</script><style lang="scss" scoped>
@import "./../../../../style/universal";#compositeLeftTop {height: $occupy-all;width: $occupy-all;//background-color: red;
}
</style>

Vue：使用highCharts相关推荐

vue集成Highcharts 云词图
vue集成Highcharts 云词图最近接手一个需求,需要服务端统计词语,前端出一个云图. 记得很早之前在echarts看到过一个云词图,去翻一下echarts官网没翻到索性去Highcharts ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue 中 highcharts 的简单使用
以柱形图举例,实现步骤如下: npm安装 Highcharts 相关资源 npm install highcharts --save 在vue要引入图表的界面引入使用引入: import Highc ...
vue中用highcharts制作韦恩图
下载两个插件下载 npm install highcharts-vue 下载 npm install highcharts --save 因为hightcharts本身是不具备韦恩图的'venn'模 ...
【前端小技能】vue + highcharts 绘制世界地图及各个国家的地图
项目用的是vue,工作需求是:绘制世界地图,然后通过世界地图点击可以跳转到各个国家的地图,之前只单独做过世界地图+中国地图,查询资料了解到了highCharts-vue,让我们开始吧. 在vue项目基 ...
vue获取tr内td里面所有内容_vue 项目学习
首先页面的整体内容结构以及package.json 里面的内容 package.json router.js 路由功能import Vue from 'vue' import Router from ...
一文带你快速上手Highcharts框架
前言前端开发中,数据可视化尤为重要,最有效的方式可以通过图表库进行数据可视化,其中 ECharts.Highcharts 提供了丰富的图表,适用各种各样的功能,ECharts 相对来说基本可满足日常 ...
vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现
附上 heightcharts 官网地址 Highcharts 演示 | Highchartshttps://www.hcharts.cn/demo/highcharts 首先需要下载一下 heigh ...
数据大屏可视化-highcharts-3D实心饼图
highcharts官网地址,HIGHCHARTS 图集引入npm install highcharts --save 在main.js中 // highcharts引入 import Highch ...
3d饼图 vue_在Vue中如何使用highCharts绘制3d饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,现在分享给大家,也给大家做个参考. highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用h ...

Vue：使用highCharts

Vue：使用highCharts相关推荐

最新文章

热门文章