介绍 & lt; template>
类& lt; p=癱hart"祝辞
& lt; p: id=癷d":选项=皁ption"祝辞& lt;/p>
& lt;/p>
& lt;/template>
& lt; script>
从& # 39;进口HighCharts highcharts& # 39;
出口默认{//验证类型
道具:{
id: {
类型:字符串
},
选择:{
对象类型:
}
},
安装(){
HighCharts.chart(这一点。id、this.option)
}
}
& lt;/script>
& lt; scoped>风格;
& lt;/style> & lt;图表:id=癷d":选项=皁ption"祝辞& lt;/Chart>
从“进口图表。/Chart";
出口默认{
名称:“HelloWorld",
组件:{
图表
},
数据(){
返回{
味精:“欢迎来到你的Vue。js App",
id:“test",
选择:{
学分:{
启用:假
},
图:{
类型:“line"
},
标题:{
文字:“月平均气温“;//表头文字
},
副标题:{
文字:“数据来源:WorldClimate.com"//表头下文字
},
xAxis: {//x轴显示的内容
类别:[
“一月“,
“二月“,
“三月“,
“四月“,
“五月“,
“六月“,
“七月“,
“八月“,
“九月“,
“十月“,
“十一月“,
“十二月“
),
plotbands:(
{//可以显示一个方块,如果需要的话可以更改透明度和颜色
来自:4.5,
:6.5,
颜色:“rgba (68170213 0)“;//透明度和颜色
}
]
},
桠溪:{//y轴显示的内容
标题:{
文字:“气温(°C)“;
}
},
plotOptions: {
线:{
dataLabels: {
启用:假//开启数据标签
},
enableMouseTracking:假//关闭鼠标跟踪,对应的提示框,点击事件会失效
}
},
系列:[
{//两条数据
名称:“东京“,
数据:[
7.0,
6.9,
9.5,
14.5,
18.4,
21.5,
25.2,
26.5,
23.3,
18.3,
13.9,
9.6
]
},
{
名称:“伦敦“,
数据:[
3.9,
4.2,
5.7,
8.5,
11.9,
15.2,
17.0,
16.6,
14.2,
10.3,
6.6,
4.8
]
}
]
}
}
}
小编给大家分享一下vue中怎么使用hightchats,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> vue中使用hightchats
1,安装highcharts
npm安装highcharts——保存
2,在主要。js中
从& # 39;进口Highcharts Highcharts/highstock& # 39;;
从& # 39;进口HighchartsMore highcharts/highcharts-more& # 39;;
从& # 39;进口HighchartsDrilldown highcharts/模块/钻取# 39;;
从& # 39;进口Highcharts3D highcharts/highcharts-3d& # 39;;
从& # 39;进口Highmaps highcharts/模块/地图# 39;;
HighchartsMore (Highcharts)
HighchartsDrilldown (Highcharts);
Highcharts3D (Highcharts);
Highmaps (Highcharts);
新Vue ({
艾尔:& # 39;#应用# 39;
路由器,
axios,
组件:{应用},
模板:& # 39;& lt;应用程序/祝辞& # 39;
方法:{
moreChart () {
var选项=this.getMoreOptions (this.type);
如果(this.chart) {
this.chart.destroy ();
};//初始化Highcharts图表
这一点。图=new Highcharts.Chart (& # 39; highcharts-more& # 39;,选项);
}
}
}) 3,创建图组件
4,其他组件引用图表
以上是“vue中怎么使用hightchats”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
