echarts - 饼图

效果图

  1. Label颜色。
  2. 下拉框样式。
  3. 标题字体大小。
<div class="card">
    <div class="card-head">
      <span style="margin: 0 20px;">隐患专业</span>
      <select style="float: right;margin: 5px 10px;border: 1px solid #074290;background-color: #011643;color:#ccc;">
        <option>全部</option>
        <option>2017年</option>
        <option>2018年</option>
        <option>2019年</option>
        <option>2020年</option>
      </select>
    </div>
    <div class="card-body" id="main2" style="height:210px;"></div>
  </div>
body{
  background-color: #050c29;
  padding: 30px;
}
.card{
  margin: 20px;
  width: 476px;
  padding:1px;
  background: linear-gradient(to left, #007bff, #007bff) left top no-repeat, 
      linear-gradient(to bottom, #007bff, #007bff) left top no-repeat, 
      linear-gradient(to left, #007bff, #007bff) right top no-repeat,
      linear-gradient(to bottom, #007bff, #007bff) right top no-repeat, 
      linear-gradient(to left, #007bff, #007bff) left bottom no-repeat,
      linear-gradient(to bottom, #007bff, #007bff) left bottom no-repeat,
      linear-gradient(to left, #007bff, #007bff) right bottom no-repeat,
      linear-gradient(to left, #007bff, #007bff) right bottom no-repeat;
  background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px; 
  box-shadow: 0 1px 1px rgba(0 0 0 / 5%);
  border-radius:5px;
  border: 1px solid rgba(50, 105, 89, 0.17);
}
.card-head{
  height: 30px;
  width: 100%;
  background-color: #011643;
  line-height: 30px;
  font-size: 14px;
  color: #ccc;
}
.card-body{
  width: 100%;
  background-color: #04133a;
}


var myChart2 = echarts.init(document.getElementById('main2'));

// 指定图表的配置项和数据
var option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    show: false,
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '70%'],
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold',
          color: '#ccc'
        }
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'outside',
            color: '#ddd'  // 字体白色
          }
        }
      },
      labelLine: {
        show: true,
        color: '#ccc'
      },
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ]
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值