美文网首页
vue echarts折线图 获取本地 json 文件动态更新数

vue echarts折线图 获取本地 json 文件动态更新数

作者: 醉笙情丶浮生梦 | 来源:发表于2019-01-16 14:31 被阅读0次

    预览图


    154761943.jpg

    html

    <div class="chart">
      <div class="hint"> <span class="dian">电压值 input</span>
        <div class="dotA left"></div> &nbsp;<span class="dotAS">{{atitle}}</span>
        <div class="dotB left"></div> &nbsp;<span class="dotBS">{{btitle}}</span>
        <div class="dotC left"></div> &nbsp;<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学习(二)动态数据绑定(动态更新带演示)

    相关文章

      网友评论

          本文标题:vue echarts折线图 获取本地 json 文件动态更新数

          本文链接:https://www.haomeiwen.com/subject/wptmdqtx.html