小程序 echarts图表开发项目篇（二）_淘宝小程序图表开发-CSDN博客

本文详细介绍了如何在小程序中使用ECharts库进行图表配置和渲染，包括去除tooltip文字阴影、设置图表背景颜色、调整图例位置等。通过示例代码展示了如何根据后台数据动态生成折线图，并提供了对应的HTML和CSS代码，帮助开发者实现自定义的图表展示效果。

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

tooltip文字有黑色阴影的设置tooltip.shadowBlur = 0

tooltip: {
            show: true,
            trigger: 'axis',
            shadowBlur: 0, // 去除文字阴影
            backgroundColor: 'rgba(0,0,0,0.4)',
            textStyle: {
                color: '#fff'
            },
        },

在我们项目使用的时候，肯定不能像上篇文章那样使用，因为我们得获取到后台数据，然后渲染出来，这时候我们得把option配置提取出来，具体的操作如下：

1、JS代码

const app = getApp();
import * as echarts from '../../ec-canvas/echarts';
var chartLine; // 这是第一个图表
var chartLineMore; // 这是第二个图表

function getOption(titles, xData, legendDatta, series, top) {
  var option = {
    title: {
      text: titles,
      left: 'center'
    },
    tooltip: { // 提示框
      show: true,
      shadowBlur: 0, // 去除文字阴影
      trigger: 'axis'
    },
    grid: { // 控制图表上下左右间距
      top: top || '15%',
      left: '1%',
      right: '3%',
      bottom: '30rpx',
      containLabel: true
    },
    legend: { // 显示图例组件
      show: legendDatta ? true : false,
      data: legendDatta,
      bottom: '0',
      z: 100
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        showMinLabel: true
      },
      data: xData,
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: series
  };
  return option;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ecOne: null, // 第一个图表
    ecTwo: null, // 第二个
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.get_bzzs(); // 第一个
    this.get_byzs(); // 第二个
  },

  // 渲染本月指数
  get_byzs() {
    let xData = ['06-1', '06-2', '06-3', '06-4', '06-5', '06-6', '06-7', '06-8', '06-9', '06-10', '06-11', '06-12', '06-13', '06-14', '06-15']
    let series = [{
      name: 'a',
      type: 'line',
      smooth: true, // 曲线
      data: [18, 36, 65, 30, 78, 40, 33, 23, 55, 15, 34, 15, 10, 43, 49]
    }, {
      name: 'b',
      type: 'line',
      smooth: true, // 曲线
      data: [11, 30, 45, 36, 78, 22, 36, 19, 24, 29, 35, 39, 40, 45, 50]
    }];
    let ecTwo = {
      onInit: function (canvas, width, height, dpr) {
        chartLineMore = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chartLineMore);
        let option = getOption('', xData, ['a', 'b'], series, '10%');
        chartLineMore.setOption(option);
        return chartLineMore; // 一定要return
      }
    }
    this.setData({
      ecTwo
    })
  },

  // 渲染本周指数
  get_bzzs() {
    let xData = ['1', 2, 3, 4, 5, 6, 7]
    let series = [{
      name: 'a',
      type: 'line',
      smooth: true, // 曲线
      label: {
        show: true
      },
      data: [18, 36, 65, 30, 78, 40, 33]
    }]
    let ecOne = {
      onInit: function (canvas, width, height, dpr) {
        chartLine = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chartLine);
        let option = getOption('本周菜价指数走势', xData, '', series);
        chartLine.setOption(option);
        return chartLine; // 一定要return
      },
    }
    this.setData({
      ecOne
    })
  },

})

2、HTML代码

<view class="two-echarts">
   <ec-canvas id="mychart1" canvas-id="mychart1" ec="{{ ecOne }}"></ec-canvas>
 </view>

<view class="two-echarts">
  <ec-canvas id="mychart2" canvas-id="mychart2" ec="{{ ecTwo }}"></ec-canvas>
</view>

3、CSS，echarts容器要设置高度的，宽度一般自适应100%

.two-echarts{
  width:100%;
  height:600rpx;
}

ec-canvas {
  width: 100%;
  height: 100%;
}

小程序 echarts图表开发基础篇（一）

小程序 echarts进阶篇（三），减少echarts的体积

小程序 echarts进阶篇（四），手指缩放与放大