前言
最近在做项目的时候，产品说要在后台的首页放入多折线图，但不是多数据折线图。 我在网上找找，基本上是多数据折线图。 例如：
同时改变关键词也没有什么值得参考的。
折线图的实现
没有参考价值的东西，只能自己摸索。 因此，我试着复制折线图中的HTML内容。 因此，——只显示折线图，控制台中没有报告错误。
开始了一些想法，问题的原因可能如下。
一、数据未收到；
二、数据绑定问题
同时存在三、一、二个问题。
最后，我们发现第一个HTML结构有问题，后续的数据绑定有问题。
highcharts插件绑定id，并将数据呈现到相应id的容器中。 highcharts官方文档的实例不太引人注目，绕了一点远。
日本铁路代码
var vm=new Vue({ (
El : ' # APP '，
数据： {
//表的当前页面数据
list: []，
status: '3'，
(，
created :功能(
//this.date=vm.date['new Date']；
this.loaddata(this.Status )；
(，
methods: {
//从服务器读取数据
加载数据(状态) {
let vm=this；
虚拟机. list loading=true；
$.getJSON(Ajax请求地址)、{status: status}、Function(RES ) )。
虚拟机. time=[ ]；
虚拟机. number=[ ]；
虚拟机. time=RES.time； //X轴时间
虚拟机. user=RES.user； //Y轴用户数
虚拟机. downloads=RES.downloads； //Y轴下载数
虚拟机. views=RES.views； //Y轴阅读量
虚拟机. date=RES.date； //标题时间
虚拟机. list loading=false；
varchart=highcharts.chart(user )，
title: {
text: vm.date '用户数'
(，
subtitle: {
text: '数据源：'
(，
雅yAxis: {
title: {
text: '用户数'
}
(，
发光二极管： {
layout: 'vertical '，
align: 'right '，
verticalAlign: 'middle '
(，
xAxis: {
categories: vm.time
(，
series: [
{
name: '用户数'，
data: vm.user
(，
]、
响应时间： {
rules: [{
condition: {
maxWidth: 500
(，
chartOptions: {
发光二极管： {
layout: 'horizontal '，
align: 'center '，
verticalAlign: 'bottom '
}
}
() ) ]
}
)；
//highcharts.chart('id '，data )；
varchart=highcharts.chart (download )，
title: {
text: vm.date '下载次数'
(，
subtitle: {
text: '数据源：'
(，
雅yAxis: {
title: {
text:“下载次数”
}
(，
发光二极管： {
layout: 'vertical '，
align: 'right '，
verticalAlign: 'middle '
(，
xAxis: {
categories: vm.time
(，
series: [
{
name: '下载次数'，
data: vm.downloads
(，
]、
响应时间： {
rules: [{
condition: {
maxWidth: 500
(，
chartOptions: {
发光二极管： {
layout: 'horizontal '，
align: 'center '，
verticalAlign: 'bottom '
}
}
() ) ]
}
)；
)；
(，
//筛选时间类型
sel ()。
this.loaddata(this.Status )；
(，
(，
() )
HTML
效果
如果想实现多数据折线图，可以在series中添加数据项。
series: [
{
name: '用户数'，
data: vm.user
(，
{
name: '下载数量'，
data: vm.downloads
(，
{
name: '浏览数量'，
data: vm.views
(，
]、
相关链接
高清在线演示
33558 www.h charts.cn/demo/index.PHP
高清半中文API文档
33558 www.h charts.cn/API/index.PHP
注：百度搜索到的相关帖子没有提到比较准确重要的地方(相关文章也很少)，官方文档描述有些混乱。 我个人写的这个很适合做演示，适合JS基础薄弱的开发人员。 如果有错误的话，希望各位前辈在评论区指出来。