http://www.jq22.com/
echart
HTML5 Canvas绘制的图形的事件处理
这个文章写得好..
这个echart 确实很牛逼啊, canvas 完成这个样子
我很好奇两个东西,
- 他的事件到底是怎么封装的? 是用位置来弄的嘛?
- 他的这些个参数设置的思路,,,封装的时候怎么想到的捏?
还有,这个东西好实用啊!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dddd</title>
<style type="text/css">
#bar,
#pie {
display: inline-block;
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid black;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="bar"></div>
<div id="pie"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.js"></script>
<script type="text/javascript">
var myBarChart = echarts.init(document.getElementById('bar'));
var myPieChart = echarts.init(document.getElementById('pie'));
// 定义数据
$.ajax({
type: "get",
url: "echardemodata.txt",
async: true,
success: function(data) {
console.log(JSON.parse(data));
renderBar(JSON.parse(data));
},
error: function(e) {
console.log(e);
}
});
function renderBar(data) {
// 对 数据进行排序
// 这种用法还挺新奇的.
// 有点无法解释进合适的知识系统.
data.sort(compair("total"));
var arrName = [];
var arrTotal = [];
data.forEach((item) => {
arrName.push(item.name);
arrTotal.push(item.total);
})
var option = {
title: {
text: '销量图',
subtext: '各种杂物'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
// 这里需要传个数组.
data: arrName
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
// 这里需要传个数组.
data: arrTotal
}]
};
myBarChart.setOption(option);
// echart提供的 事件封装.
myBarChart.on('click', function(params) {
// console.log(params);
renderPie(params.dataIndex,data);
});
}
function compair(prop) {
return function(a, b) {
return a[prop] - b[prop]
}
}
function renderPie(index,data) {
var arrYear = [];
var year = data[index].year;
for(var key in year){
arrYear.push({
value : year[key],
name : key
})
}
var option = {
backgroundColor: '#2c343c',
title: {
text: '每年销量',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [{
name: '每年销售量',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
// 这个地方应该传参
data: arrYear,
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200;
}
}]
};
myPieChart.setOption(option);
}
</script>
</body>
</html>
echardemodata.txt
[
{
"name" : "羽绒服",
"total" : 500,
"year" : {
"2016" : 150,
"2017" : 160,
"2018" : 190
}
},
{
"name" : "袜子",
"total" : 800,
"year" : {
"2016" : 300,
"2017" : 300,
"2018" : 200
}
},
{
"name" : "筷子",
"total" : 900,
"year" : {
"2016" : 150,
"2017" : 500,
"2018" : 250
}
},
{
"name" : "皮鞋",
"total" : 300,
"year" : {
"2016" : 160,
"2017" : 60,
"2018" : 80
}
}
]
网友评论