echart问题 - Githubissues

zio-zhang commented 1 year ago

相同的option在ele旧版上正常运行，现在版本上无法正常显示

<template>
  <div class="ma-content-block p-3 mt-3">
    <ma-chart height="420px"  :option="chartOptions" />
  </div>
</template>
<script setup>
import {  reactive   } from "vue"

const chartOptions = reactive({
  height:'320px',
  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'
  },
})
</script>

zio-zhang commented 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>

zio-zhang commented 1 year ago

TMEMNSVE(9@}R~VI7I4{WZK

kanyxmo commented 1 year ago

props 不是 option 是 options

zio-zhang commented 1 year ago

props 不是 option 是 options 都试了，一样的。框架的示例代码就是option
<ma-chart height="300px" :option="loginChartOptions" />

mineadmin / MineAdmin-Vue

echart问题 #36