Vue+Echarts

最新推荐文章于 2024-05-27 15:23:56 发布

Joise.

最新推荐文章于 2024-05-27 15:23:56 发布

阅读量465

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/Joise_/article/details/121056162

版权

Vue+Echart

股票成交量

https://echarts.apache.org/examples/zh/index.html#chart-type-line

绘制股票OHLC线图

https://echarts.apache.org/examples/zh/editor.html?c=custom-ohlc

绘制股票K线图 (数据每天变化趋势)

https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush

批量CSV转JSON gbk转utf-8

选择gbk编码导入mysql

选择utf-8编码导出mysql
在这里插入图片描述

后面依次按需求下一步，开始。

批量修改文件名

第一步：提取文件名

1、点击右键，在打开的菜单项中选择新建文档；

2、打开新建的文档后，输入：DIR*.*/B>文件名列表.CSV 命令，保存关闭，更改文档名称后缀为.bat；或者全选文件复制路径，粘贴到execl中替换路径名，留下文件名。

3、双击后缀为.bat文件然后看到生成文件名列表.csv；

4、双击打开文件名列表.csv发现已经全部导入到excel表格了；

第二步：批量更改文件名

1、在公式的表格C2中输入="REN “&A2&” "&B2，其中A2为原文件名，B2为新文件名，然后拖动公式应用整列，制作成下面的表格；

2、复制公式的整理数据，在文件外面新建一个文档，打开文档粘贴复制的内容；

3、然后把文档后缀改成.bat，双击打开发现全部文件已经批量修改完成了；

ren 命令出现乱码

解决方法：右键编辑.bat文件，点击菜单栏的文件-另存为，在窗口底部的编码（E）处，将“UTF-8”改为“ANSI”。

原因：cmd中的编码方式为ANSI，若中文不是此编码方式则会出现乱码。

Vue+Axios自动更新

使用Vue+Axios实现前端自动刷新数据

<div>
  <LineChart v-bind:namejson="value"></LineChart>
</div>

created() {
  this.timer = setInterval(() => {
    axios.get('../../static/all_json/'+this.test+'.json').then(response => {
      for(var i=0;i<response.data.RECORDS.length;i++) {
        this.datalist[i] = response.data.RECORDS[i].交易日期;
        this.data[i] = parseInt(response.data.RECORDS[i].成交量);
      }
      this.myEcharts();

    }, response => {
      console.log("error");
    },1000);
  })
},
beforeDestroy() {
  clearInterval(this.timer)
  },

项目

主页面

```html
<template>
  <div>
    <div>
      <h1 class="txt4">股票数据可视化</h1>
    </div>
    <el-row>
      <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="1">
        <div>
            <h3 class="txt4">股票名称</h3>
          <div>
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
                >

              </el-option>
            </el-select>
          </div>
          <br>
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="value"
              clearable
            >
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :xs="19" :sm="19" :md="19" :lg="19" :xl="23">
        <div>
          <el-card shadow="always">
            <div>
              <LineChart v-bind:namejson="value"></LineChart>
            </div>
          </el-card>

            <el-divider ></el-divider>
          <el-card>
            <div>
              <OHLC v-bind:namejson="value"></OHLC>
            </div>
          </el-card>

          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import LineChart from "./LineChart";
import OHLC from "./OHLC";

export default {
  name: 'HelloWorld',
  data () {
    return {
      options: [{
        value: '选项1',
        label: '万华化学'
      }, {
        value: '选项2',
        label: '上海能源'
      }, {
        value: '选项3',
        label: '世名科技'
      }, {
        value: '选项4',
        label: '中国动力'
      }, {
        value: '选项5',
        label: '中新药业'
      }],
      value: '',
      namejson:''
    }
  },

  mounted() {
    // axios.get('../../static/'+this.name+'.json').then(response => {
    //     this.msg = response.data;
    //     for(var i=0;i<response.data.length;i++) {
    //       this.datalist[i] = response.data[i].交易日期;
    //     }
    // }, response => {
    //   console.log("error");
    // });
  },
  components: {
    OHLC,
    LineChart
  }
}
</script>

<style>
.el-card{
  box-shadow: 5px 5px 5px 5px rgb(116, 114, 114) !important;
}
.txt4{
  background: linear-gradient(to bottom, #c0c0c4, #282727);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.el-input__inner {
  background-color: #ffffff;
  width: 180px;
}
</style>

子组件

<template>
  <div className="Echarts">
    <div id="main" style="width: 1290px;height:500px;"></div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: 'Echarts',
  data () {
    return {
      datalist:[],
      data:[],
      name: 'sh600432',
      test: ''
    }
  },
  props:{
    namejson: {
      type:String,
      required: true
    }
  },
  watch:{
    namejson:{
      handler(n,o){
        this.test = n
      }
      // deep: true
    }
  },

  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          data: this.datalist

        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: this.data,
            type: 'line'
          }
        ],
        title: {
            left: 'center',
            text: this.test+'股票成交量'
          }
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

  },
  created() {
    this.timer = setInterval(() => {
      axios.get('../../static/all_json/'+this.test+'.json').then(response => {
        for(var i=0;i<response.data.RECORDS.length;i++) {
          this.datalist[i] = response.data.RECORDS[i].交易日期;
          this.data[i] = parseInt(response.data.RECORDS[i].成交量);
        }
        this.myEcharts();

      }, response => {
        console.log("error");
      },1000);
    })
  },
  beforeDestroy() {
    clearInterval(this.timer)
    },
  mounted() {
    console.log(this.test)
    // axios.get('../../static/all_json/'+this.test+'.json').then(response => {
    //     console.log(response.data.RECORDS[1])
    //   for(var i=0;i<response.data.RECORDS.length;i++) {
    //       this.datalist[i] = response.data.RECORDS[i].交易日期;
    //       this.data[i] = parseInt(response.data.RECORDS[i].成交量);
    //     }
    //   this.myEcharts();
    //
    // }, response => {
    //   console.log("error");
    // },1000);


  }
}
</script>

<style>

</style>

<template>
  <div className="Echarts">
    <div id="main1" style="width: 1290px;height:500px;"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Echarts",
  data () {
    return {
      date:[],
      data:[],
      name: 'sh600432',
      test: ''
    }
  },
  props:{
    namejson: {
      type:String,
      required: true
    }
  },
  watch:{
    namejson:{
      handler(n,o){
        this.test = n
      },
      deep: true
    }
  },
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById('main1'));

      var option = {
        title: {
          left: 'center',
          text: this.test+"股票K线图"
        },
        xAxis: {
          data: this.date
        },
        yAxis: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        series: [
          {
            type: 'candlestick',
            data: this.data
            // data: [
            //   [20, 34, 10, 38],
            //   [40, 35, 30, 50],
            //   [31, 38, 33, 44],
            //   [38, 15, 5, 42]
            // ]
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  created() {
    this.timer = setInterval(() => {
      axios.get('../../static/all_json/'+this.test+'.json').then(response => {
        // console.log(response.data.RECORDS[1].开盘价);
        // console.log(response.data.RECORDS[1].收盘价);
        // console.log(response.data.RECORDS[1].最低价);
        // console.log(response.data.RECORDS[1].最高价);

        for(var i=0;i<response.data.RECORDS.length;i++) {
          this.date[i] = response.data.RECORDS[i].交易日期;

          var b = [];//辅助数组
          b[0] = response.data.RECORDS[i].开盘价;
          b[1] = response.data.RECORDS[i].收盘价;
          b[2] = response.data.RECORDS[i].最低价;
          b[3] = response.data.RECORDS[i].最高价;
          this.data[i] = b;
        }
        // for(var i=0;i<response.data.RECORDS.length;i++) {
        //     this.date[i] = response.data.RECORDS[i].交易日期;
        //     this.data[i] = parseInt(response.data.RECORDS[i].成交量);
        //   }
        this.myEcharts();

      }, response => {
        console.log("error");
      });
    })
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style scoped>

</style>

Joise.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue+Echarts

Vue+Echart股票成交量https://echarts.apache.org/examples/zh/index.html#chart-type-line绘制股票OHLC线图https://echarts.apache.org/examples/zh/editor.html?c=custom-ohlc绘制股票K线图 (数据每天变化趋势)https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush批量CSV转J
复制链接

扫一扫