Vue2中使用echarts,并从后端获取数据同步

一、安装echarts

复制代码
npm install echarts -S 

二、导入echarts

在script中导入,比如:

复制代码
import * as echarts from "echarts";

三、查找要用的示例

比如柱状图

四、初始化并挂载

javascript 复制代码
<template>
  <div id="total-orders-chart" style="width: 800px; height: 600px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.options()
  },
  methods: {
    /**
     * init方法
     */
    options() {
      const chart = echarts.init(document.getElementById("total-orders-chart"));
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标显示什么可以是返回来的数据可以进行数据过滤
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],  //纵坐标显示
            type: "line",
            smooth: true,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    },
  },
};
</script>

显示成功

五、使用axios来从数据库中获取数据

调用getLineChartData进行http请求访问

javascript 复制代码
//获取折线图数据
export function getLineChartData(){
  return http({
    url: '/data/getLineChartData',
    method: 'get'
  })
}

拿到返回的数据后,把值赋值给series数组[0]的data数据即可

javascript 复制代码
initLineChart() {
      getLineChartData().then(resp=>{
        if(resp.data.code===200){
          const chart = echarts.init(document.getElementById("total-orders-chart"));
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '登录数据',
              subtext: '过去一周每天登录次数',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: resp.data.data,
                type: 'line'
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          chart.setOption(option);
        }
      })
    },

这是后端设置的数据

最终显示效果图,与数据吻合一致

相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch2 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js