집 >웹 프론트엔드 >JS 튜토리얼 >vue 파일은 echarts.js를 어떻게 사용합니까? (두 가지 방법을 소개합니다)

vue 파일은 echarts.js를 어떻게 사용합니까? (두 가지 방법을 소개합니다)

不言앞으로: 2018-10-18 17:09:584447검색

이 글의 내용은 vue 파일에서 echarts.js를 사용하는 방법에 관한 것입니다. (2가지 방법을 소개합니다.) 도움이 필요한 친구들이 참고하면 좋을 것 같습니다.

이 프로젝트는 vue-cli를 사용하여 개발되었기 때문에 최근 작업에 echart를 사용해야 합니다. 인터넷에서 vue로 합성된 vue-echarts를 찾았지만 vue에 지정된 데이터 형식을 사용하고 싶지 않았기 때문에 네이티브 echart를 참조하는 vue 프로젝트의 간단한 데모를 만들었습니다. 구현 과정은 다음과 같습니다. 메소드가 사용됩니다

준비

1. echarts 종속성 설치

콘솔 입력: npm install echarts --save

2. 글로벌 소개

main.js에 도입

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

차트 만들기

첫번째

여러 차트를 하나의 .vue 파일에 도입

Create WelcomePage.vue

<template>
  <div>
    <h1>第一种在vue中使用echart的方式</h1>

    <div>
      <div></div>
    </div>

    <div>
      <div></div>
    </div>

  </div>
</template>

<script>
// 引入基本模板,按需加载
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/pie&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);


export default {
  name: "WelcomePage",
  data () {
    return {  }
  },
  mounted(){
    this.drawBar();
    this.drawPie();
  },
  methods:{
    drawBar(){
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById(&#39;barGraph&#39;));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: &#39;全年产量趋势图&#39;,
          left: &#39;center&#39;
        },
        tooltip: {
          trigger: &#39;item&#39;,
          formatter: &#39;{a} <br/>{b} : {c}&#39;
        },
        legend: {
          left: &#39;center&#39;,
          data: [&#39;本年&#39;, &#39;上年&#39;],
          bottom:0
        },
        xAxis: {
          type: &#39;category&#39;,
          name: &#39;x&#39;,
          splitLine: {show: false},
          data: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
        },
        grid: {
          left: &#39;1%&#39;,
          right: &#39;2%&#39;,
          bottom: &#39;8%&#39;,
          containLabel: true
        },
        yAxis: {
          type: &#39;category&#39;,
          name: &#39;y&#39;,
          splitLine: {show: true},
          data:[&#39;10%&#39;,&#39;20%&#39;,&#39;30%&#39;,&#39;40%&#39;,&#39;50%&#39;,&#39;60%&#39;,&#39;70%&#39;,&#39;80%&#39;,&#39;90%&#39;,&#39;100%&#39;]
        },
        series: [
          {
            name: &#39;本年&#39;,
            type: &#39;line&#39;,
            data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
          },
          {
            name: &#39;上年&#39;,
            type: &#39;line&#39;,
            data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
          },
        ]
      })
    },
    drawPie(){
      let pieGraph = echarts.init(document.getElementById(&#39;pieGraph&#39;));
      pieGraph.setOption({
        title : {
          text: &#39;某站点用户访问来源&#39;,
          subtext: &#39;纯属虚构&#39;,
          x:&#39;center&#39;
        },
        tooltip : {
          trigger: &#39;item&#39;,
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: &#39;vertical&#39;,
          left: &#39;left&#39;,
          data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
        },
        series : [
          {
            name: &#39;访问来源&#39;,
            type: &#39;pie&#39;,
            radius : &#39;55%&#39;,
            center: [&#39;50%&#39;, &#39;60%&#39;],
            data:[
              {value:335, name:&#39;直接访问&#39;},
              {value:310, name:&#39;邮件营销&#39;},
              {value:234, name:&#39;联盟广告&#39;},
              {value:135, name:&#39;视频广告&#39;},
              {value:1548, name:&#39;搜索引擎&#39;}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
              }
            }
          }
        ]
      })
    }
  }
}
</script>

구현 효과는 다음과 같습니다.

vue 파일은 echarts.js를 어떻게 사용합니까? (두 가지 방법을 소개합니다)

두 번째 구현 방법( 는 형식) )

상위 구성 요소인 father.vue

  <div>
    <h1>{{ msg }}</h1>
    <p>第二种方式：通过组件的方式进行页面渲染</p>
    <div>
      <bar-graph></bar-graph>
    </div>

    <div>
      <pie-graph></pie-graph>
    </div>

  </div>

<script>
// 引入两个子组件
  import BarGraph from "./bargraph";
  import PieGraph from "./piegraph";
  export default {
    name: "father",
    components:{
      BarGraph,
      PieGraph,
    },
    data(){
      return{
        msg: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
      }
    }
  }
</script>

하위 구성 요소 barGraph.vue

   <div>
    <p>{{ msg }}</p>
    <div>
      <div></div>
    </div>
  </div>

<script>
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);

  // import echarts from &#39;echarts&#39;

    export default {
      name: "bargraph",
      // props:[&#39;id&#39;],  // 第一种接收父亲传过来的值的方式
      props: {
        id: {
          type: String,
          default: &#39;chart&#39;
        }
      },
      data(){
          return {
            msg: "我是第一个子组件--bar",
            chart: null,
          }
      },
      mounted(){
        this.drawBar();
      },
      methods:{
        drawBar(){
          this.chart = echarts.init(document.getElementById(this.id));
          let colors = [&#39;#5793f3&#39;, &#39;#d14a61&#39;, &#39;#675bba&#39;];
          this.chart.setOption(
            {
              color: colors,

              tooltip: {
                trigger: &#39;axis&#39;,
                axisPointer: {
                  type: &#39;cross&#39;
                }
              },
              grid: {
                right: &#39;20%&#39;
              },
              toolbox: {
                feature: {
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              legend: {
                data:[&#39;蒸发量&#39;,&#39;降水量&#39;,&#39;平均温度&#39;]
              },
              xAxis: [
                {
                  type: &#39;category&#39;,
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
                }
              ],
              yAxis: [
                {
                  type: &#39;value&#39;,
                  name: &#39;蒸发量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[0]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;降水量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  offset: 80,
                  axisLine: {
                    lineStyle: {
                      color: colors[1]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;温度&#39;,
                  min: 0,
                  max: 25,
                  position: &#39;left&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[2]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} °C&#39;
                  }
                }
              ],
              series: [
                {
                  name:&#39;蒸发量&#39;,
                  type:&#39;bar&#39;,
                  data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                  name:&#39;降水量&#39;,
                  type:&#39;bar&#39;,
                  yAxisIndex: 1,
                  data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                  name:&#39;平均温度&#39;,
                  type:&#39;line&#39;,
                  yAxisIndex: 2,
                  data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
              ]
            }
          )
        }
      }
    }
</script>

생성pieGraph.vue

<template>
    <div>
      <p>{{ msg }}</p>

      <div>
        <div></div>
      </div>
    </div>
</template>

<script>
  import echarts from &#39;echarts&#39;

    export default {
      name: "piegraph",
      props:{
        id: {
          type: String,
          default: &#39;pieChart&#39;
        }
      },
      data(){
          return{
            msg: &#39;我是第二个子组件--pie&#39;,
            pieChart: null
          }
      },
      mounted(){
          this.drawPie();
      },
      methods: {
        drawPie () {
          this.pieChart = echarts.init(document.getElementById(this.id));
          this.pieChart.setOption(
            {
              title : {
                text: &#39;某站点用户访问来源&#39;,
                subtext: &#39;纯属虚构&#39;,
                x:&#39;center&#39;
              },
              tooltip : {
                trigger: &#39;item&#39;,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: &#39;vertical&#39;,
                left: &#39;left&#39;,
                data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
              },
              series : [
                {
                  name: &#39;访问来源&#39;,
                  type: &#39;pie&#39;,
                  radius : &#39;55%&#39;,
                  center: [&#39;50%&#39;, &#39;60%&#39;],
                  data:[
                    {value:335, name:&#39;直接访问&#39;},
                    {value:310, name:&#39;邮件营销&#39;},
                    {value:234, name:&#39;联盟广告&#39;},
                    {value:135, name:&#39;视频广告&#39;},
                    {value:1548, name:&#39;搜索引擎&#39;}
                  ],
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
                    }
                  }
                }
              ]
            }
          )
        }
      }
    }
</script>

효과는 다음과 같습니다. 다음과 같이 구현되었습니다:

vue 파일은 echarts.js를 어떻게 사용합니까? (두 가지 방법을 소개합니다)

라우팅 파일은 다음과 같습니다.

import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'

import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'WelcomePage',
      component: WelcomePage
    },
    {
      path: '/father',
      name: 'father',
      component: Father,
      children:[
        {
          path: '/bargraph',
          name: 'bargraph',
          component: BarGraph
        },
        {
          path: '/piegraph',
          name: 'piegraph',
          component: PieGraph
        }
      ]
    },
  ]
})

위 내용은 vue 파일은 echarts.js를 어떻게 사용합니까? (두 가지 방법을 소개합니다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

echarts npm JS

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：React의 가상 dom 및 diff 알고리즘 설명(코드 포함)다음 기사：React의 가상 dom 및 diff 알고리즘 설명(코드 포함)