首页 > 其他分享 >HighCharts使用——vue整合highcharts

HighCharts使用——vue整合highcharts

时间:2022-12-21 11:22:52浏览次数:48  
标签:vue Highchart highchartsMore HighCharts 组件 import highcharts

引入组件

  • 在main.js文件中,代码如下
/**
 * highcharts
 */
import Highchart from "highcharts/highcharts";//基础组件
import HighchartsVue from "highcharts-vue";//vue组件
import highchartsMore from 'highcharts/highcharts-more'//更多图表使用组件,如仪表盘
import stockInit from "highcharts/modules/stock";//地图使用组件
stockInit(Highchart);
highchartsMore(Highchart);
Highchart.setOptions({ global: { useUTC: false } });
//注册到全局vue
Vue.use(HighchartsVue, {
    highcharts: Highchart
});

使用

<template>
    <div>
        <highcharts class="chart_box" canvasId="elec_capacity" :options="options" :style="this.style"></highcharts>
    </div>
</template>

 

标签:vue,Highchart,highchartsMore,HighCharts,组件,import,highcharts
From: https://www.cnblogs.com/zuiyue_jing/p/16995834.html

相关文章

  • [vue] ajax post form表单提交 json提交
    postform表单提交方法一importajaxfrom'axios';importqsfrom'qs';exportconst接口名=(params,data)=>ajax({method:'post',url:`地址?${qs.stringify(pa......
  • [vue] 解决keyup事件和blur重复调用,触发不同方法
    解决vue中keyup事件和blur重复调用在keyup触发的事件中解绑失焦函数,在获得焦点focus事件中绑定失焦函数。<template><el-inputv-model="inputVal"placeholder="......
  • vuex辅助函数使用
    辅助函数的认识:vuex的辅助函数有4个:mapState,mapGetters,mapMutations,mapActions辅助函数的写法:1、在页面引入import{mapState,mapGetters,mapMutatio......
  • [vue] watch对比computed
    文章目录​​computed计算属性实现姓名案例​​​​watch监视实现姓名案例​​​​对比​​​​姓名案例新需求时使用watch法​​​​computed和Iwatch之间的区别:​​compu......
  • 基于springboot+mybatis+vue软件缺陷管理系统
    @目录一、系统介绍二、功能展示1.主页2.个人中心3.缺陷管理4.项目管理5.系统管理6.统计分析三、代码展示四、获取源码一、系统介绍系统主要功能:开发人员:主页、个人中心(......
  • [vue] Vue绑定class样式
    1.class样式写法:class=“xxx”xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适......
  • [vue] 项目使用rem 单个组件 PC端自适应大屏
    rem.jsexportfunctionresetRem(){//基准大小baseSize=100;constbasePc=baseSize/1440;//表示1440的设计图,使用100PX的默认值constvW=window.inner......
  • [vue] 列表过滤
    基本页面<divid="root"><h2>人员列表</h2><inputtype="text"placeholder="请输入名字"v-model="keyWord"><ul><liv-for="(p,index)ofpersons":key="index......
  • [mapbox] popup挂载自定义组件 vue
    pop.vue<template><div>222</div></template><script>exportdefault{name:'display-map-pop',components:{},props:{PopObj:{type:Array,d......
  • [vue] 列表排序
    <divid="root"><h2>人员列表</h2><inputtype="text"placeholder="请输入名字"v-model="keyWord"><button@click="sortType=2">年龄升序</button><button@cl......