vue echarts折线图 获取本地 json 文件动态更新数
2019-01-16 本文已影响0人
醉笙情丶浮生梦
预览图
154761943.jpg
html
<div class="chart">
<div class="hint"> <span class="dian">电压值 input</span>
<div class="dotA left"></div> <span class="dotAS">{{atitle}}</span>
<div class="dotB left"></div> <span class="dotBS">{{btitle}}</span>
<div class="dotC left"></div> <span class="dotCS">{{ctitle}}</span>
</div>
<div id="chartDiv" class="chartDiv">
</div>
</div>
js
<script>
window.onresize = function () {
// console.log("窗口变化");
//重新加载图表视图大小
app.myChart.resize();
}
var app = new Vue({
el: '#app',
data() {
return {
myChart: '',
xdata: '',
ydata: '',
adata: '',
bdata: '',
cdata: '',
atitle: '',
btitle: '',
ctitle: '',
option: {
// title: {
// text: '电压值'
// },
tooltip: {},
// legend: {
// data: ['销量']
// },
xAxis: {
type: 'category',
name: "时间",
boundaryGap: false, // x轴点
data: '',
nameTextStyle: {
color: "#666666", //name 字体颜色
fontSize: 18, // 字体大小
},
// axisLine: { //坐标轴
// // lineStyle: {
// // opacity: 0.01, //设置透明度就可以控制显示不显示
// // },
// },
splitLine: { //网格线
show: false, //网格线 （显示竖线）
// lineStyle: {
// color: '#979797',
// },
},
axisTick: { //刻度线
show: false, //去掉刻度线
},
},
yAxis: {
min: 0, //最小刻度
max: 0, //最大刻度
type: 'value',
//name: '℃ ', //是基于Y轴线对齐，用空格站位让坐标轴名称与刻度名称对齐
nameTextStyle: {
color: '#444e65',
align: 'left', //文字水平对齐方式
verticalAlign: 'middle', //文字垂直对齐方式
},
axisTick: { //刻度线
show: false, //去掉刻度线
},
axisLine: { //坐标轴线
lineStyle: {
opacity: 0, //透明度为0
},
},
splitLine: { //网格线
show: true, //网格线
lineStyle: {
color: '#979797',
},
},
},
series: [{
data: '',
type: 'line', //图表类型，折线图还是柱状图还是饼图
areaStyle: {
opacity: 0 //隐藏折线背景色
},
itemStyle: { //折线拐点标志的样式。
normal: {
color: '#6C7C92', //折线颜色
},
},
},
{
data: '',
type: 'line', //图表类型，折线图还是柱状图还是饼图
itemStyle: { //折线拐点标志的样式。
normal: {
color: '#BAA396', //折线颜色
},
},
},
{
data: '',
type: 'line', //图表类型，折线图还是柱状图还是饼图
itemStyle: { //折线拐点标志的样式。
normal: {
color: '#A8A8A8', //折线颜色
},
},
}
]
},
}
},
mounted: function () {
that = this
that.getTableData();
console.log("初始运行", this.option);
setInterval(function () {
$.ajax({
url: './xianlutu.json',
dataType: "json",
success: function (data) {
// console.log(data);
that.xdata = data.data.xdata;
that.ydata.min = data.data.ydata.min;
that.ydata.max = data.data.ydata.max;
that.adata = data.data.adata;
that.bdata = data.data.bdata;
that.cdata = data.data.cdata;
that.atitle = data.data.atitle;
that.btitle = data.data.btitle;
that.ctitle = data.data.ctitle;
// console.log(that.xdata,"完整");
that.xdata = that.xdata.slice(-20);
// console.log(that.xdata,"刷新获取后二十位");
that.adata = that.adata.slice(-20);
that.bdata = that.bdata.slice(-20);
that.cdata = that.cdata.slice(-20);
// console.log(that.adata,"刷新之前后二十位222");
//为了模拟数据变化
// that.adata = that.adata.reverse();
// console.log(that.adata,"刷新获取后二十位222");
that.option.xAxis.data = that.xdata;
that.option.yAxis.min = that.ydata.min;
that.option.yAxis.max = that.ydata.max;
that.option.series[0].data = that.adata;
that.option.series[1].data = that.bdata;
that.option.series[2].data = that.cdata;
that.myChart.setOption(that.option);
}
})
}, 3000);
},
methods: {
getTableData: function () {
var that = this;
$.ajax({
url: './xianlutu.json',
dataType: "json",
success: function (data) {
console.log(data);
that.xdata = data.data.xdata;
that.ydata.min = data.data.ydata.min;
that.ydata.max = data.data.ydata.max;
that.adata = data.data.adata;
that.bdata = data.data.bdata;
that.cdata = data.data.cdata;
that.atitle = data.data.atitle;
that.btitle = data.data.btitle;
that.ctitle = data.data.ctitle;
// console.log(that.xdata,"完整");
that.xdata = that.xdata.slice(-20);
// console.log(that.xdata,"获取后二十位");
that.adata = that.adata.slice(-20);
that.bdata = that.bdata.slice(-20);
that.cdata = that.cdata.slice(-20);
that.option.xAxis.data = that.xdata;
that.option.yAxis.min = that.ydata.min;
that.option.yAxis.max = that.ydata.max;
that.option.series[0].data = that.adata;
that.option.series[1].data = that.bdata;
that.option.series[2].data = that.cdata;
that.myChart = echarts.init(document.getElementById('chartDiv'));
that.myChart.setOption(that.option);
}
})
}
}
});
</script>
json数据定义
{
"data": {
"xdata": ["4", "5", "6", "7", "8", "9", "10", "11", "12", "13","4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "16",, "17"],
"ydata": {
"min": 0,
"max": 25
},
"atitle":"A项",
"btitle":"B项",
"ctitle":"C项",
"adata": [7, 2, 19, 15, 25, 17, 5, 6, 13, 24,11,7, 2, 19, 15, 25, 17, 5, 6, 13, 24,11],
"bdata": [8, 18, 21, 13, 17, 24, 16, 11, 19, 15,12,8, 18, 21, 13, 17, 24, 16, 11, 19, 15,12],
"cdata": [6, 21, 19, 10, 24, 15, 2, 23, 4, 13,13,6, 21, 19, 10, 24, 15, 2, 23, 4, 13,13]
}
}
参考：
echarts之折线图配置
Echarts4.0 使用系列——折线图，这里可能有你需要的
有关echarts数据更新后，图表没有更新的情况
Echarts自动刷新数据
ECharts.js学习（二）动态数据绑定(动态更新带演示)
