echarts优化饼图图dataView中的样式

要优化饼图的dataView中的样式，可以通过以下步骤进行：

1. 在echarts实例化的时候，设置dataView的参数，例如：

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    toolbox: {
        feature: {
            dataView: {
                show: true,
                title: '数据视图',
                readOnly: true,
                lang: ['数据视图', '关闭', '刷新'],
                optionToContent: function(opt) {
                    var axisData = opt.series[0].data;
                    var html = '<table style="width:100%;text-align:center"><tbody><tr><td>名称</td><td>值</td></tr>';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        html += '<tr><td>' + axisData[i].name + '</td><td>' + axisData[i].value + '</td></tr>';
                    }
                    html += '</tbody></table>';
                    return html;
                }
            }
        }
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [{
                value: 335,
                name: '直接访问'
            },
            {
                value: 310,
                name: '邮件营销'
            },
            {
                value: 234,
                name: '联盟广告'
            },
            {
                value: 135,
                name: '视频广告'
            },
            {
                value: 1548,
                name: '搜索引擎'
            }
        ]
    }]
});

2. 在optionToContent函数中，可以自定义生成的html代码，样式可以通过css设置，例如：

optionToContent: function(opt) {
    var axisData = opt.series[0].data;
    var html = '<table style="width:100%;text-align:center"><tbody><tr><td>名称</td><td>值</td></tr>';
    for (var i = 0, l = axisData.length; i < l; i++) {
        html += '<tr><td>' + axisData[i].name + '</td><td>' + axisData[i].value + '</td></tr>';
    }
    html += '</tbody></table>';
    html = '<div style="font-size:14px;color:#333">' + html + '</div>';
    return html;
}

在这里，我设置了表格的居中和字体颜色，同时在外层包裹了一个div，设置了字体大小。

3. 如果需要更加复杂的样式，可以使用JavaScript或jQuery来进行修改。例如，通过jQuery来修改table的样式：

optionToContent: function(opt) {
    var axisData = opt.series[0].data;
    var html = '<table><tbody><tr><td>名称</td><td>值</td></tr>';
    for (var i = 0, l = axisData.length; i < l; i++) {
        html += '<tr><td>' + axisData[i].name + '</td><td>' + axisData[i].value + '</td></tr>';
    }
    html += '</tbody></table>';
    html = '<div style="font-size:14px;color:#333">' + html + '</div>';
    $(html).find('table').css({
        'border': '1px solid #ccc',
        'border-collapse': 'collapse',
        'width': '100%',
        'text-align': 'center'
    });
    $(html).find('th,td').css({
        'border': '1px solid #ccc',
        'padding': '5px'
    });
    return html;
}

在这里，我使用了jQuery来选取生成的html中的table元素，并设置了边框、宽度和居中对齐等样式。