echarts rich用法

ECharts是一款基于JavaScript的可视化图表库，可以用于构建各种类型的图表，如折线图、柱状图、饼图等。ECharts的Rich Text组件提供了强大的富文本功能，可以在图表中添加图片、文本、链接等元素，增强图表的可视化效果。下面是一些echarts rich用法的示例：

1. 在图表中添加图片：

rich: {
  logo: {
    // 这里可以设置图片的路径和大小
    backgroundColor: {
      image: 'https://echarts.apache.org/zh/images/favicon.png'
    },
    height: 30
  }
},
series: [{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  label: {
    show: false,
    position: 'center'
  },
  emphasis: {
    label: {
      show: true,
      fontSize: '30',
      fontWeight: 'bold'
    }
  },
  // 在这里引用rich配置项中的图片
  graphic: {
    elements: [{
      type: 'image',
      style: {
        image: 'logo',
        width: 30,
        height: 30
      },
      left: 'center',
      top: 'center'
    }]
  }
}]

2. 在图表中添加文本：

rich: {
  a: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    lineHeight: 30
  }
},
series: [{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  labelLine: {
    show: false
  },
  label: {
    show: false
  },
  // 在这里引用rich配置项中的文本
  graphic: [{
      type:'text',
      left:'center',
      top:'center',
      style:{
          text:'总计',
          rich:{
              a:{
                  fontSize:20,
                  fontWeight:'bold',
                  color:'#333',
                  lineHeight:30
              }
          }
      }
   }]
}]

3. 在图表中添加链接：

rich:{
    a:{
        color:'#fff',
        backgroundColor:'#108ee9',
        padding:[5,10],
        borderRadius:5,
        fontSize:'18',
        lineHeight:'30'
    }
},
series:[{
    type:'pie',
    data:[
        {value:400, name:'Apple'},
        {value:335, name:'Samsung'},
        {value:300, name:'Huawei'},
        {value:200, name:'Xiaomi'},
        {value:100, name:'Oppo'}
    ],
    labelLine:{
        show:false
    },
    label:{
        show:false
    },
    // 在这里引用rich配置项中的链接
    graphic:[{
       type:'group',
       left:'center',
       bottom:'10%',
       children:[{
            type:'text',
            zlevel:100,
            left:'center',
            style:{
                text:'More Info',
                font-size:'18px',
                fontWeight:'bold'
            },
            action:{
                type:'redirect', 
                link:'https://www.example.com/'
            }
       },{
            type:'rect',
            zlevel:-1,
            left:'center',
            top:'middle',
            shape:{
                width:'100%',
                height:'100%'
            },
            style:{
                fill:'#fff',
                opacity:.01
            },
            action:{
                type:'redirect', 
                link:'https://www.example.com/'
            }
       }]
   }]
}]