基础库: 2.10.4

微信: 7.0.13

安卓: 9

内核版本:4.9.112

手机: OPPO K3

代码片段: https://developers.weixin.qq.com/s/PWgnRsmL7xgk

代码:

function setChartData(chart, data) {
  const option = {
    grid: {
      height: '90%',
      left: '5%',
      right: '4%',
      top: '20',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: Object.keys(data),
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color:'#fff',
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel : {
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color:'#fff',
          }
        },
      },
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: Object.values(data),
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#ad3f61',
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#cb3668" // 0% 处的颜色
            },{
              offset: 1,
              color: "#e66a6b" // 100% 处的颜色
            }], false)
          }
        }
      }
    ]
  }
  chart.setOption(option);
}


class Charts extends Component {


  config = {
    // 定义需要引入的第三方组件
    usingComponents: {
      'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
    }
  }


  state = {
    ec: {},
    info: {},
  }


  componentDidMount() {
    this.refresh()
  }


  refresh(data) {
    this.Chart.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      })
      setChartData(chart, data)
      return chart
    });
  }

  refChart = node => (this.Chart = node)
  render () {
    const {
      info,
      mode,
      canvasStatus,
      isShowSuccessDialog,
      tempFilePath,
      shareConfig,
      isShowTipDialog
    } = this.state
    return (
      
    )
  }
}


export default Charts