zoukankan      html  css  js  c++  java
  • mpvue——引入echarts图表

    安装

    mpvue-echarts的github地址

    https://github.com/F-loat/mpvue-echarts

    $ cnpm install mpvue-echarts                          
    $ cnpm install echarts 

    DEMO

    复制粘贴后即可看到效果

    <!--
     * @Author: wangyang
     * @LastEditors: wangyang
     * @Description: file content
     * @Date: 2019-04-08 16:34:52
     * @LastEditTime: 2019-04-08 18:57:44
     -->
    <template>
      <div class="wrap">
        <mpvue-echarts :echarts="echarts" :onInit="ecBarInit" canvasId="bar" />
        <mpvue-echarts :echarts="echarts" :onInit="ecScatterInit" canvasId="scatter" />
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts/dist/echarts.min'
    import mpvueEcharts from 'mpvue-echarts'
    let barChart, scatterChart
    function getBarOption () {
      return {
        color: ['#37a2da', '#32c5e9', '#67e0e3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'line' // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        legend: {
          data: ['热度', '正面', '负面']
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 15,
          top: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          }
        ],
        series: [
          {
            name: '热度',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: [300, 270, 340, 344, 300, 320, 310]
          },
          {
            name: '正面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true
              }
            },
            data: [120, 102, 141, 174, 190, 250, 220]
          },
          {
            name: '负面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'left'
              }
            },
            data: [-20, -32, -21, -34, -90, -130, -110]
          }
        ]
      }
    }
    function getScatterOption () {
      var data = []
      var data2 = []
      for (var i = 0; i < 10; i++) {
        data.push(
          [
            Math.round(Math.random() * 100),
            Math.round(Math.random() * 100),
            Math.round(Math.random() * 40)
          ]
        )
        data2.push(
          [
            Math.round(Math.random() * 100),
            Math.round(Math.random() * 100),
            Math.round(Math.random() * 100)
          ]
        )
      }
      var axisCommon = {
        axisLabel: {
          textStyle: {
            color: '#C8C8C8'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#C8C8C8'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#C8C8C8',
            type: 'solid'
          }
        }
      }
      return {
        color: ['#FF7070', '#60B6E3'],
        backgroundColor: '#eee',
        xAxis: axisCommon,
        yAxis: axisCommon,
        legend: {
          data: ['aaaa', 'bbbb']
        },
        visualMap: {
          show: false,
          max: 100,
          inRange: {
            symbolSize: [20, 70]
          }
        },
        series: [{
          type: 'scatter',
          name: 'aaaa',
          data: data
        },
        {
          name: 'bbbb',
          type: 'scatter',
          data: data2
        }
        ],
        animationDelay: function (idx) {
          return idx * 50
        },
        animationEasing: 'elasticOut'
      }
    }
    export default {
      data () {
        return {
          echarts,
          ecBarInit: function (canvas, width, height) {
            barChart = echarts.init(canvas, null, {
               width,
              height: height
            })
            canvas.setChart(barChart)
            barChart.setOption(getBarOption())
            return barChart
          },
          ecScatterInit: function (canvas, width, height) {
            scatterChart = echarts.init(canvas, null, {
               width,
              height: height
            })
            canvas.setChart(scatterChart)
            scatterChart.setOption(getScatterOption())
            return scatterChart
          }
        }
      },
      components: {
        mpvueEcharts
      },
      onShareAppMessage () {}
    }
    </script>
    
    <style scoped>
    .wrap {
       100%;
      height: 400px;
    }
    </style>

    效果图

    折线图

    <template>
      <div class="container">
        <div class="wrap">
          <mpvue-echarts :echarts="echarts" :onInit="onInit" />
        </div>
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts/dist/echarts.simple.min'
    import mpvueEcharts from 'mpvue-echarts'
    function initChart (canvas, width, height) {
      const chart = echarts.init(canvas, null, {
         width,
        height: height
      })
      canvas.setChart(chart)
      var option = {
        backgroundColor: '#fff',
        color: ['#37A2DA', '#67E0E3'],
       
        legend: {
          data: ['A', 'B']
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          name: 'A',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 78, 40, 33]
        }, {
          name: 'B',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
        }]
      }
      chart.setOption(option)
      return chart
    }
    export default {
      data () {
        return {
          echarts,
          onInit: initChart
        }
      },
      components: {
        mpvueEcharts
      },
      onShareAppMessage () {}
    }
    </script>
    
    <style scoped>
    .wrap {
       100%;
      height: 300px;
    }
    </style>

    mpvue中引入使用echarts就是这么简单且github的仓库中大部分的demo都可以直接修改使用比较方便吧,主要是之前使用过echarts所以更改起来也非常的舒服!

  • 相关阅读:
    图文并茂记录下重新配置Win10系统Flutter环境--内含Android Studio 下载安装教程
    图文并茂解决Client does not support authentication protocol requested by server; consider upgrading MySQL
    图文并茂基于阿里云linux服务器部署nodejs项目并添加pm2守护nodejs项目运行进程(Linux version 4.19.81-17.1.al7.x86_64)
    超简单的图文并茂Linux上使用yum安装Mysql(Aliyun Linux release 2.1903 LTS)
    使用linux命令直接在网上下载文件,解压,改名
    解决使用linux部署nodejs服务测试代码返回中文是乱码
    Echarts点击多组数据多个柱子中的一个柱子,获取当前点击的是第几组数据,并获取点击的是当前组别第几根柱子,以及对应横坐标,
    flutter 2.X报错 Bad state: Insecure HTTP is not allowed by platform:
    flutter 2.x运行flutter run 报错Cannot run with sound null safety, because the following dependenciesdon'
    flutter 1.升级2.X在模型类中序列化JSON报错Non-nullable instance field 'title' must be initialized.
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/10671465.html
Copyright © 2011-2022 走看看