Echarts折线图步骤

一个前端程序猿

已于 2023-01-18 16:58:25 修改

阅读量181

点赞数

文章标签： echarts javascript 前端

于 2023-01-18 16:48:08 首次发布

本文链接：https://blog.youkuaiyun.com/ZHANG157111/article/details/128728050

版权

这篇博客详细介绍了如何利用Echarts库在JavaScript前端项目中创建折线图，包括设置CSS、HTML结构以及配置JS文件的步骤，并展示了最终的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="slid-wrap">
  <!-- 选项栏 -->
  <view class="title">
    <view wx:for="{{list}}" wx:key="index" data-index="{{index}}" class="list_item {{activeIndex == index ? 'on' : ''}}" bindtap="tabClick">{{item}}
    </view>
  </view>
  <!-- 内容 -->
  <view class="content">
    <view style="display:{{activeIndex !== 0 ? 'none' : 'block'}}">
      <view class="container">
        <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ec }}"></ec-canvas>
      </view>
    </view>
    <view style="display:{{activeIndex !== 1 ? 'none' : 'block'}}">1</view>
    <view style="display:{{activeIndex !== 2 ? 'none' : 'block'}}">3</view>
    <view style="display:{{activeIndex !== 3 ? 'none' : 'block'}}">4</view>
  </view>
</view>

下面是css，上面是html


.container{
  padding: 0;
}
ec-canvas{
  width:700rpx;    
  height: 700rpx;
  margin: 0 auto;
}
  .slid-wrap .title {
    display: flex;
    flex-direction: row;
  }
  .slid-wrap .title .list_item {
    flex-grow: 1;
    box-sizing: border-box;
    height: 85rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 85rpx;
    border-bottom: 4rpx solid #eee;
  }
  .slid-wrap .title .on {
    border-bottom: 4rpx solid #0770EB;
    color: #0770EB;
  }

下面是js文件，炫耀下载echarts哦

import * as echarts from "../../ec-canvas/echarts"
function setOption(chart, xlist, ylist1, ylist2) {
  var option = {
     //图标提示框组件
     tooltip: {
      //触发方式  axis坐标轴触发
      trigger: 'axis'
  },
    legend: {
      data: ['邮件营销', '联盟广告']
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xlist
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        data: ylist1
      },
      {
        name: '联盟广告',
        type: 'line',
        data: ylist2 
      }
    ]
  };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    xlist: [],
    ylist:[],
    ylist2:[],
    list: ['全款', '待收货', '待发货', '已收货'],
    activeIndex: 0
    
  },
  // tab切换
  tabClick(val) {
    this.setData({
      activeIndex: val.currentTarget.dataset.index
    })
  },
  
  getOneOption:function(){
    this.setData({
      xlist: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      ylist: [120, 132, 101, 134, 90, 230, 210],
      ylist2:[220, 182, 191, 234, 290, 330, 310]
    })
    this.init_one(this.data.xlist, this.data.ylist, this.data.ylist2)
  },
  init_one: function (xdata, ylist1, ylist2) {           //初始化第一个图表
    console.log(this.oneComponent)
    this.oneComponent.init((canvas, width, height,dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart, xdata, ylist1, ylist2)  //赋值给echart图表
      this.chart = chart;
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.oneComponent = this.selectComponent('#mychart-one');
    this.getOneOption();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
    
  },

})

展示效果：