echart 图表使用
官网配置说明：https://echarts.apache.org/zh/option.html#title
html 很简单，一个空div，会自动生成canvas
<div id="mod"></div>
引入相应的echarts.min.js文件 （https://www.jsdelivr.com/package/npm/echarts），我使用的版本是（5.3.3）（https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js）
需求：移动端位置不同，label 文字在内部外部均展示，title保持居中，外部label均显示在右侧。每个扇形对应一段内容，高亮的时候需要显示对应的内容。
实现中发现的点：
1、移动端使用media 进行 query查询定义方法：query查询的是容器的宽度非屏幕宽度，宽度定义仅找到maxWidth和 minWidth 方法。
写文档的时候使用手册竟然更新了 https://echarts.apache.org/handbook/zh/get-started/（旧版：https://echarts.apache.org/zh/tutorial.html#移动端自适应）
2、label 文字在内部外部均展示，没找到好办法，只能写了两遍 series 定义不同的date-name，
label属性写在哪都可以，在外为公用属性，在data中定义为独有属性。
定义label文字背景及颜色: data-label里设置。连接线：定义在 data-itemStyle中
3、修改线条的方向（根据API接口文档中labelLayout的例子修改的）
labelLayout: function (params) { if(params.dataIndex==2){ return{ x: params.rect.x + params.rect.width/2, y: params.rect.y + params.rect.height * 1.3, verticalAlign: 'bottom', align: 'left', } }else if(params.dataIndex==0){ return{ x: params.rect.x + params.rect.width*1.3, y: params.rect.y - params.rect.height/2, } } }
4、监听窗口
window.addEventListener('resize',myChart.resize);
5、ECharts 中支持的图表行为，通过 dispatchAction 触发，属性参考：https://echarts.apache.org/zh/api.html#action
6、在 ECharts 中主要通过 on 方法添加事件处理函数。属性参考：https://echarts.apache.org/zh/api.html#events
最后上完整代码：
<script language="javascript"> (function($){ init(); // $(window).resize(function() { // init(); // }); })(jQuery); function init(){ var myChart = echarts.init(document.getElementById('mod_learn')); option = { media:[ //media开始 { query:{}, option:{ // option1 title: { text: '好好学习', top: 'center', left:'center', textStyle: { color: '#1a1a1a', fontSize: 30, } }, series: [ { type: 'pie', radius: [75, 115], center: ['50%','50%'], left:'0', emphasis:{ scaleSize: 15, }, data: [{ value: 10, name: '自主学习死扛', label:{ color:'#e10031', backgroundColor:'#e4c1d6', distanceToLabelLine:0 }, itemStyle:{ normal:{color:'#ED2C65'}, emphasis:{color:'#ED2C65'} }, }, { value: 20, name: '向他人学习借鉴', label:{ color:'#fb9100', backgroundColor:'#eadecc', distanceToLabelLine:0 }, itemStyle:{ normal:{color:'#F9CB69'}, emphasis:{color:'#F9CB69'} } }, { value: 70, name: '知识付诸实践活到老学到老', label:{ color:'#0b59b8', backgroundColor:'#cfe2f8', distanceToLabelLine:0, width: 170, }, itemStyle:{ normal:{color:'#6B98ED'}, emphasis:{color:'#6B98ED'} } } ], itemStyle: { normal: { label: { show: true, position:'outer', fontSize: 14, lineHeight:24, padding: [0, 10], overflow:'break', fontWeight: 'bold', align: "left", borderRadius: 20, } }, }, labelLayout: function (params) { if(params.dataIndex==2){ return{ x: params.rect.x + params.rect.width/2, y: params.rect.y + params.rect.height * 1.3, verticalAlign: 'bottom', align: 'left', } }else if(params.dataIndex==0){ return{ x: params.rect.x + params.rect.width*1.3, y: params.rect.y - params.rect.height/2, } } } }, // 222 { type: 'pie', radius: [75, 115], center: ['50%','50%'], left:'0', z: 10, emphasis:{ scaleSize: 15, label:{ fontSize: 22, } }, data: [ { value: 10, name: '10%', itemStyle:{ normal:{color:'#ED2C65'}, emphasis:{color:'#ED2C65'} } }, { value: 20, name: '20%', itemStyle:{ normal:{color:'#F9CB69'}, emphasis:{color:'#F9CB69'} } }, { value: 70, name: '70%', itemStyle:{ normal:{color:'#6B98ED'}, emphasis:{color:'#6B98ED'} } }, ], itemStyle: { normal: { label: { show: true, position: 'inner', fontSize: 18, fontWeight: 'bold', align: "center", color:'#fff', rotate: -45, }, } } } //2222end ] // option1 end }, }, { query:{maxWidth: 545}, option:{ // option2 title: { left: 64, }, series:[ { center: ['left','50%'], left:130, },{ center: ['left','50%'], left:130, }, ], // option2 end }, }, { query:{maxWidth: 414}, option:{ // option3 title: { left: 52, textStyle: { fontSize: 24, } }, series:[ { radius: [55, 90], left: 105, emphasis:{ scaleSize: 10, }, itemStyle: { normal: { label: { fontSize: 13, } } } },{ radius: [55, 90], left: 105, emphasis:{ scaleSize: 10, }, }, ], // option3 end }, }, //media结束 ] }; myChart.setOption(option); window.addEventListener('resize',myChart.resize); let index = 0; myChart.dispatchAction({ type: 'highlight', dataIndex: 0, }); myChart.on('mouseover', function(params) { var dindex = params.dataIndex; $('.dev-echart-mod').removeClass('active'); $('#dev_'+dindex).addClass('active'); if (params.dataIndex != index) { myChart.dispatchAction({ type: 'downplay', dataIndex: index, }); } }); myChart.on('mouseout', function (e) { index = e.dataIndex; myChart.dispatchAction({ type: 'highlight', dataIndex: index, }); }); } </script>
最终效果如下：
同时借鉴了大神们的文章，主要内容如下，内容出处（https://www.cnblogs.com/leoxuan/p/6544351.html）：
检测是否为移动端的JS
var ismobile = false; var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() } ismobile = browser.versions.mobile;
根据浏览器尺寸，设置图表容器的大小
var pagewidth = $(window).width();
var pageheight = $(window).height();
if (browser.versions.mobile) { window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); $("#chartmain").height(pageheight*0.6); $("#chartmain").width(pagewidth * 0.95); } else { $("#chartmain").height("500px"); $("#chartmain").width("700px"); } function hengshuping(){ if(window.orientation==180||window.orientation==0){ $("#chartmain").height($(window).height()-20); $("#chartmain").width("100%"); } if(window.orientation==90||window.orientation==-90){ $("#chartmain").height($(window).height()-20); $("#chartmain").width("100%"); } }
我就是我，记性不好，那就用写的吧。
