本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码,供大家参考,具体内容如下
效果图
安装
npm install highcharts-vue
在main.js进行全局配置
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: { //去掉标题 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: { //设置颜色,显示点 color: "#0e6145", dataLabels: { enabled: true } } }, series: [ { name: "活跃度", data: [0, 0, 0, 0, 0, 1, 9] } ] }; this.chartOptions = template; } } }, </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。