在vue里面引入echarts（柱状图，饼图，折线图））

Posted 2023-03-09

参考技术A 1.安装echarts 

npm install echarts -S

2.在main.js中引用echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.封装chart组件(复制粘贴就好了)

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="bar" style="width: 600px;height:400px;"></div>

<div id="pie" style="width: 600px;height:400px;"></div>

<div id="line" style="width: 600px;height:400px;"></div>

在script里面写下面内容

export default

    mounted()

    this.drawLine();//调用这个方法

,

    methods:

        drawLine ()

        var echarts = require('echarts');

        var barChart = echarts.init(document.getElementById('bar'));

        var pieChart = echarts.init(document.getElementById('pie'));

        var lineChart = echarts.init(document.getElementById('line'));

        barChart.setOption(

          title:

              text: '柱状图'

          ,

          tooltip: ,

          legend:

              data: ['销量']

          ,

          xAxis:

              data: ["肉夹馍", "馒头", "豆沙包", "粉丝汤", "豆包", "油条"]

          ,

          yAxis: ,

          series: [

              name: '销量',

              type: 'bar',

              data: [5, 20, 36, 10, 10, 20]

          ]

        );

pieChart.setOption(

  title:

      text: '饼图'

  ,

  series: [

      name: '访问来源',

      type: 'pie', // 设置图表类型为饼图

      radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。

      data: [ // 数据数组，name 为数据项名称，value 为数据项值

         

              value: 235,

              name: '视频广告'

          ,

         

              value: 274,

              name: '联盟广告'

          ,

         

              value: 310,

              name: '邮件营销'

          ,

         

              value: 335,

              name: '直接访问'

          ,

         

              value: 400,

              name: '搜索引擎'

         

      ]

  ]

);

lineChart.setOption(

  title:

      text: '折线图',

  ,

  tooltip: ,

  legend:

      data: ['销量', '试穿', '退货'],

      x: 'right'

  ,

  xAxis:

      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

  ,

  yAxis: ,

  series: [

      name: '销量',

      type: 'line',

      data: [5, 20, 36, 10, 10, 20]

  ,

      name: '试穿',

      type: 'line',

      data: [30, 40, 50, 20, 12, 30]

  ,

      name: '退货',

      type: 'line',

      data: [1, 2, 1, 3, 5, 2]

  ]

);