echats3.7样式问题

最新推荐文章于 2024-04-24 17:29:22 发布

有你才有光

最新推荐文章于 2024-04-24 17:29:22 发布

阅读量221

点赞数 1

文章标签： echarts样式 echarts3.7 样式切换

一。切换格式时要销毁chart

chart.dispose();

二。注意theme的格式

3.5 data ,3.7data.theme

三。如果采用json方式，注意ajax要同步，同步方式

------------------------------------------代码，json自己下载，引入就好

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<div class="circle" style="width: 300px;height: 300px;"></div>
<select class="c_sel" id='my_select'>
<option value ="infographic">infographic</option>
<option value ="shine">shine</option>
<option value ="dark">dark</option>
<option value ="customed">customed</option>
<option value ="vintage">vintage</option>
<option value ="westeros">westeros</option>
<option value ="wonderland">wonderland</option>
</select>
<script>
$(function(){

/*-------------------饼图部分-----------------------*/
bing("infographic");
function bing(theme){
option_Circle = {
title : {
text: '某站点用户访问来源',
},
"legend": {
"data": ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [{
"name": "访问来源",
"type": "pie",
"data": [
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
radius: [0, '30%'],
}]
};
chart = echarts.init(document.getElementsByClassName("circle")[0], theme);
chart.setOption(option_Circle);
$.ajaxSetup({
async : false
});
$("#my_select").change(function(){
var themeValue=$('#my_select').val();
chart.dispose();
$.getJSON("json/"+themeValue+".project.json",function(data){
echarts.registerTheme(themeValue, data.theme);
});
chart = echarts.init(document.getElementsByClassName("circle")[0], themeValue);
chart.setOption(option_Circle);
})
}

})
</script>
</body>
</html>

-----------------