Closed zio-zhang closed 1 year ago
相同的options在echart测试网站上测试正常
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
legend: {
selected: {'收益': true}
},
tooltip: {
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
if (params.componentType == 'series') {
let date = new Date(params.value[0] * 1000);
let tip = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
let i = params.seriesIndex + 1;
return tip + '<br/>' + params.seriesName + ":" + params.value[i];
}
}
},
dataset: [
{
source: [["时间", "收益"], [1676476800, "-2.43"], [1676563200, "-4.35"]]
},
],
xAxis: {
type: "category",
axisLabel: {
formatter: function (val, index) {
let date = new Date(val * 1000);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
}
},
yAxis: {},
series: [
{type: 'line'},
],
dataZoom: [
{type: 'slider', start: 0, end: 100}
],
grid: {
x: 60, y: 60, x2: 60, y2: 60,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
props 不是 option 是 options
props 不是 option 是 options 都试了,一样的。 框架的示例代码就是option
<ma-chart height="300px" :option="loginChartOptions" />
相同的option在ele旧版上正常运行,现在版本上无法正常显示