页面自适应
首先先设置
html{
width:100vw;
height:100vh;
}
然后相应的div
<div class="contenA" style="with:10vw;height:10vh">
<div class="contenB" style="with:9vw;height:9vh">
放echarts
</div>
</div>
这样紫，随着视口大小的变化，相应的盒子也就跟着自适应了。
接着，echarts。
（1）上面那种写法，echarts已经能自适应，不过不是实时的，每次刷新一次，才能自适应。
（2）echarts根据视口自适应，实时的
setTimeout(function (){ window.onresize = function () { myChart.resize(); } },200);
//onresize 事件会在窗口或框架被调整大小时发生。
上面代码的意思是，如果myChart.resize刷新，window.onresize跟着刷新
echarts中第一个是option。echats各种信息就是在这里面配置的
option的legend
option的tooltip （鼠标放上去有提示框）
看文档，或者blog.csdn.net/dreamsup/ar…
已经有详细说明
option的dataset
也可以是常见的json形式
。下面给个例子，动态赋值渲染。
data:that.serie
option的series中itemStyle ( 设置饼型图的数据)
xAxis : //X轴数据
yAxis : //Y轴数据
series : //驱动图表数据
绘制echart直角坐标系的 grid
//echats饼型图和柱形图联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js"></script></head><body> <div style="border:2px solid #666;width:50vw;height:50vh;float:left;" > <div style="width: 50vw;height: 50vh;" id="chartmain"></div> </div></body><style> html{ width: 100vw; height: 100vh; }</style><script type="text/javascript"> setTimeout(function () {option = { //option 图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项 legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '45%'}, series: [ //条形图 {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { //饼型图 type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], //跳转饼型图的位置 label: { // 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比） formatter: '{b}: {@2012} ({d}%)' //@的作用是显示2012的数据，如果没有@，直接显示2012，当成字符串 }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ]}; //获取dom容器 var myChart = echarts.init(document.getElementById('chartmain')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //myChart.on 就是跟着事件一起改变 myChart.on('updateAxisPointer', function (event) { var xAxisInfo = event.axesInfo[0]; if (xAxisInfo) { var dimension = xAxisInfo.value + 1; myChart.setOption({ series: { id: 'pie', label: { formatter: '{b}: {@[' + dimension + ']} ({d}%)' }, encode: { value: dimension, tooltip: dimension } } }); }}); setTimeout(function (){ window.onresize = function () { myChart.resize(); } },200);}); </script><style>html{ width: 100vw; height: 100vh; font-size: 62.5%;}</style></html>
