Vue中使用echarts，json数据

Vue中使用echarts，json数据

1. 初始化vue项目

   vue init webpack 项目名

2. 安装依赖

   npm install echarts -S

   npm install vue-axios -S

3. 导入依赖（在HelloWorld.vue中使用）

   import * as echarts from “echarts” // ehcarts5.x使用这种

   import axios from “axios”

4. 在static下创建目录

   目录结构如下；

div1文件（折线图）示例。

option.js

export const option1 = {
    
    title: {
        text: "div1的折线图",
        subtext: "子标题"
    },
    yAxis: {
        type: "value"
    },
    tooltip: {
        trigger: "axis"
    },
    xAxis: {
        type: "category",
        data: [],   // 将数据保存到json中，使用axios读取数据。axios.get("json路径").then(res=>{})  
        boundaryGap: false
    },
    legend:{
        data: ["销量"]
    },
    series: {
        type: "line",
        name: "销量",
        data: [],   //
        smooth: true
    }


}

data.json

{
    "data1":["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "data2":[820, 932, 901, 934, 1290, 1330, 1320]
}

6. vue内容展示

   路径如下；

Helloworld.vue

<template>
  <div>
    <div id="div1" style="width: 700px;height:300px;float: left;margin:20px"></div>
    <div id="div2" style="width: 700px;height:300px;float: left;margin:20px"></div>
    <div id="div3" style="width: 700px;height:300px;float: left;margin:20px"></div>
    <div id="div4" style="width: 700px;height:300px;float: left;margin:20px"></div>
  </div>
  
</template>

<script>

import * as echarts from "echarts"
import axios from "axios"

import {option1} from "../../static/div1/option"
import {option2} from "../../static/div2/option"
import {option3} from "../../static/div3/option"
import {option4} from "../../static/div4/option"

export default {
  name: 'HelloWorld',
  mounted(){
    this.getOption1();
    this.getOption2();
    this.getOption3();
    this.getOption4();
  },
  methods: {
    getOption1(){
      var myEcharts = echarts.init(document.getElementById("div1"));
      myEcharts.setOption(option1);
      axios.get("../../static/div1/data.json").then(res => {
        myEcharts.setOption(
          {
            xAxis: {
              data: res.data.data1
            },
            series: {
              data: res.data.data2,
              label: {
                  show: true
              }
            }
          }
        )
      })
    },
    getOption2(){
      var myEcharts = echarts.init(document.getElementById("div2"));
      myEcharts.setOption(option2);
      axios.get("../../static/div2/data.json").then(res => {
        myEcharts.setOption(
          {
            xAxis: {
              data: res.data.data1
            },
            series: {
              data: res.data.data2,
              label: {
                  show: true
              }
              }
          }
        )
      })
    },
    getOption3(){
      var myEcahrts = echarts.init(document.getElementById("div3"));
      myEcahrts.setOption(option3);
      axios.get("../../static/div3/data.json").then(res => {
        myEcahrts.setOption({
          series: {
            data: res.data.data1,
            label: {
                show: true
            }
          }
        })
      })
    },
    getOption4(){
      var myEcharts = echarts.init(document.getElementById("div4"));
      myEcharts.setOption(option4);
      axios.get("../../static/div4/data.json").then(res => {
        myEcharts.setOption({
          radar: {indicator: res.data.indicator},
          series: {
            data: res.data.data,
            label: {
                show: true
            },
            tooltip: {
              trigger: 'item'
            }
          }
          
        })
      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

7. 结果展示

   npm run dev启动Vue，页面查看。