Echarts区域面积areaStyle用图片进行纹理填充

React DOM结构代码:

import fillImg from 'xx/fillImg.png'; // 填充纹理图片

......
{/* 趋势图填充纹理图片 */}

......

 echarts option:

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      smooth: true,
      areaStyle: {
        color: { image: document.getElementById('fillimg'), repeat: 'repeat' }
      },
      data: [150, 230, 224, 218, 135, 147, 260]
    }
  ]
};

fillimg图片:

Echarts区域面积areaStyle用图片进行纹理填充_第1张图片

折线图效果:

Echarts区域面积areaStyle用图片进行纹理填充_第2张图片

你可能感兴趣的:(ECharts,echarts,前端,javascript)