解决echarts饼图的显示比例，并根据显示内容的字体和大小//准备的dom初始化echarts实例
varpieechart=e charts.init (document.getelementbyid (pieec hart ) )；
//指定图表的构成项目和数据
var pieoption={
title : {
text:公里总行驶距离'，
x:'left '，
文本样式： {
color:'#FFFFFF '，
fontSize:25
}
(，
tooltip : {
trigger: 'item '，
formatter 3360 ' { a } br/{ b } : { c } km '
(，
发光二极管： {
orient : 'vertical '，
x : 'left '，
top:40，
itemWidth:70，
itemHeight:30、
格式器： ' { name } '，
文本样式： {
color: '#FFFFFF '
(，
DATA:[{name: '高速50km '，icon:'rect'}，{name: '一级150km '，icon:'rect'}，{ name 3360 '二级1550} '
，
Calculable :真，
series : [
{
name:公里总行驶距离'，
类型： ' pie '，
radius : '70%，//饼图半径大小
center: ['60% '，' 60%']，//饼图的位置
label:{ //饼图文本标签
正常： {
show :真，
position:'inner '，//标签位置
文本样式： {
字体权重： 300，
fontSize : 16 //字符的字体大小
(，
formatter:'{d}% '
}
(，
data:[
{value:50，name: '高速50km '，item style : { normal : } color : ' # Fe 0000 ' }，
{value:150，name: '一级150km '，item style : { normal : } color : ' # f 29700 ' }，
{value:150，name: '等级2150km '，item style : { normal : } color : ' # 02 b0ed
'}}},{value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
{value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
pieEchart.setOption(pieoption);
如何给eCharts饼图区域指定颜色 option = { title : { text: "全局指标状态分布图", x:"left", y:"top" }, tooltip : { show: true, formatter: "{a} <br/>{b} : {c} ({d}%)" }, color:["red", "green","yellow","blueviolet"]} 刷新数据 <div class="foot_ri" id="txt"> <div class="foot_txt"> <span style="color: #6e85bf;font-size: 20px">诉求百分比占比</span> <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"_echarts_instance_="ec_1550106173775"> <div style="position: relative; overflow: hidden; width: 1920px; height: 1037px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> <canvas data-zr-dom-id="zr_0" width="1920" height="1037" style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1037px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> </div> </div> </div> <img src="../static/images/refresh.png" id="ig" style="margin-top: -370px;margin-left: 935px;"></div>
点击 id="ig" 图片，id="container" 饼图刷新
<#--2019/2/13饼图-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
// title: {
// text: '诉求百分比占比',
// subtext: '',
// x: 'center'
// },
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"/*鼠标经过显示*/
},
// color:['#0160ae', '#36a5fc','#0d86e7'],
color: ['#6f87bf', '#7084a2', '#5e6787'],
legend: {
orient: 'vertical',
// bottom: 500,
left: 'right',
data: ['咨询', '意见建议', '投诉举报'],
textStyle: {
fontWeight: 300,
fontSize: 16, //文字的字体大小
color: '#345cc1'//文字的字体颜色
},
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '65%', /*饼图大小*/
center: ['40%', '50%'], /*饼图位置*/
data: [
{value: 335, name: '咨询'},
{value: 234, name: '意见建议'},
{value: 135, name: '投诉举报'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
<#--结束-->
<#--2019/2/15刷新数据-->
<script>
$('#ig').click(function () {
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
myChart.setOption({ //加载数据图表
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: [
{value: 222, name: '咨询'},
{value: 555, name: '意见建议'},
{value: 56, name: '投诉举报'}
]
}
})
})
</script>
<#--结束-->