如何在vue中使用highcharts
1、首先npm install -S vue-highcharts
下载过后可能会有报错此时需要吧npm 安装依赖删除掉,重新按照npm install
2、在main.js
中写入全局使用
import highcharts from 'highcharts'
import VueHighcharts from 'vue-highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
Vue.use(VueHighcharts)
3,新建charts.vue
文件,写入代码
<template>
<div class="x-bar">
<div :id="id" :option="option" :obj="chartObj"></div>
</div>
</template>
<script>
//import exportCSV from '@/export-csv.js';
import HighCharts from "highcharts";
export default {
// 验证类型
data() {
return {
chartObj: {}
};
},
props: {
id: {
type: String
},
option: {
type: Object
}
},
watch: {
option() {
HighCharts.chart(this.id, this.option);
}
},
mounted() {
HighCharts.chart(this.id, this.option);
// this.chartObj = HighCharts.chart(this.id, this.option);
}
};
</script>
4、在需要的页面引入
import XChart from "./charts.vue";
5、接下来就可以使用highcharts啦
<div class="homec-z">
<highcharts :options="zhexiants" style="height:368px;background: rgba(255, 255, 255, 0.05);"></highcharts>
</div>
6、在data()
中写入
zhexiants: {
chart: {
// type: "area",
type: "areaspline",
backgroundColor: "rgba(255, 255, 255, 0)"
},
// colors: ["#0EECF8"],
title: {
text: "收入增长趋势",
align: "left",
style: {
color: "#fff",
fontFamily: "Microsoft YaHei",
fontSize: "18px",
fontWeight: "400"
}
},
xAxis: {
allowDecimals: false
},
yAxis: {
title: {
text: ""
},
labels: {
formatter: function() {
return this.value / 1000 + "k";
}
}
},
tooltip: {
pointFormat: "{series.name} 制造 <b>{point.y:,.0f}</b>枚弹头"
},
plotOptions: {
area: {
pointStart: 1940,
fillOpacity: 0.05,
marker: {
enabled: false,
symbol: "circle",
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
credits: {
enabled: false // 禁用版权信息
},
series: [
{
name: "",
lineColor: "#12DAFB",
//颜色改为渐变色
color: {
fillOpacity: 0.05,
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, "rgba(14,236,248,0.99)"],
[1, "rgba(255,255,255,0.05)"]
]
},
showInLegend: false,
data: [
13464,
15708,
24099,
16357,
22237,
14401,
18344,
23586,
22380
]
}
]
},