Vue+Echarts柱状折线图

最新推荐文章于 2024-03-16 15:56:08 发布

天使的同类

最新推荐文章于 2024-03-16 15:56:08 发布

阅读量775

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/Summer_JK/article/details/109054713

版权

本文介绍了如何使用Vue.js处理JSON数据，进而渲染出结合柱状图和折线图的可视化效果。通过HTML和JavaScript代码示例，展示了具体的实现步骤，最终展示了一张融合柱状和折线元素的图表。

摘要由CSDN通过智能技术生成

vue处理json数据渲染柱状折线图

HTML：

      <div id="lineCharts" style="width: 100%; height: 500px; margin-top: 20px"></div>

JS：

    drawLineCharts() {
   
        let data = {
   sid: "02fertdfg0221",choose: 1,};  //这里是接口的传参
        axios
          .request({
   
            url: url,  //接口地址
            method: "POST",
            data: JSON.stringify(data),
          })
          .then((res) => {
   
            let dateData = []; //日期
            let rankingData = []; //排行
            let commentsData = []; //销量