Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
更新時(shí)間：2022年03月28日 10:16:25 作者：明知山_
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
安裝
npm install highcharts-vue
在main.js進(jìn)行全局配置
import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue)
<highcharts :options="chartOptions"></highcharts>
<script>
export default {
? data() {
? ? return {
? ? ? chartOptions: {}
? ? };
? },
? mounted(){
? this.getChart()
? }
? methods:{
? ? getChart() {
? ? ? var template = {
? ? ? ? title: {
? ? ? ? ? //去掉標(biāo)題
? ? ? ? ? text: ""
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? //自定義x軸
? ? ? ? ? categories:["05-21", "05-22", "05-23", "05-24", "05-25", "05-26", "05-27"]
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? //去掉y軸的value
? ? ? ? ? title: { text: "" }
? ? ? ? },
? ? ? ? credits: {
? ? ? ? ? //去掉水印
? ? ? ? ? enabled: false
? ? ? ? },
? ? ? ? plotOptions: {
? ? ? ? ? line: {
? ? ? ? ? ? //設(shè)置顏色，顯示點(diǎn)
? ? ? ? ? ? color: "#0e6145",
? ? ? ? ? ? dataLabels: {
? ? ? ? ? ? ? enabled: true
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "活躍度",
? ? ? ? ? ? data: [0, 0, 0, 0, 0, 1, 9]
? ? ? ? ? }
? ? ? ? ]
? ? ? };
? ? ? this.chartOptions = template;
? ? }
? }
?},
</script>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的過濾器及其時(shí)間格式化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理解析
這篇文章主要介紹了vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理,通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue項(xiàng)目如何配置git忽略文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vuex5中的Pinia插件機(jī)制，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue安裝less-loader依賴失敗問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
VueCli3構(gòu)建TS項(xiàng)目的方法步驟
這篇文章主要介紹了VueCli3構(gòu)建TS項(xiàng)目的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識(shí)，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場(chǎng)景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項(xiàng)目百分之七十會(huì)遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06