vue页面用到echarts

最新推荐文章于 2023-08-09 22:38:13 发布

原创最新推荐文章于 2023-08-09 22:38:13 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

该博客主要讲述了在Vue页面中运用ECharts的相关内容，涉及前端开发中Vue框架与可视化工具ECharts的结合使用，能为页面带来数据可视化效果。

<div id="myChart" style="width: 1200px;height: 500px;margin-top: 30px"></div>

      //统计绘画
      drawLine() {
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            name: '日期',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            name: '金额',
            type: 'value'
          },
          legend: {
            data: ['收入', '支出']
          },
          series: [{
            name: '收入',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          },
            {
              name: '支出',
              data: [80, 92, 91, 34, 190, 130, 120],
              type: 'line'
            }
          ]
        });
      },