[Bug] upgrade local 4.4.0version to 5.5.0 version，the front-end reported error

[waterworld-warehouse]

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=area-stack

Steps to Reproduce

1.write a component in my project. （This component worked in version 4.4.0, but not in version 5.5.0）

2.use my component.

      <StackedAreaChart
        v-if="Object.keys(linePlotData).length > 0"
        :ref="linePlotData.tab_name"
        :height="height"
        :width="itemWidth"
        :plot-data="linePlotData"
        :sort-tooltip="linePlotData.sort_tooltip"
        :sort-legend="linePlotData.sort_legend"
        :columns-with-area="linePlotData.columns"
      />

            linePlotData:
  {
    'plot_type': 'LinePlot',
    'tab_name': '底层配置走势图',
    'title': '底层配置走势图',
    'index': [
      '2023-12-01',
      '2023-12-04',
      '2023-12-05',
      '2023-12-06',
      '2023-12-07',
      '2023-12-08',
      '2023-12-11',
      '2023-12-12',
      '2023-12-13',
      '2023-12-14'
    ],
    'columns': ['苹果1号', '香蕉2号', '西瓜3号', '葡萄4号'],
    'data': {
      '苹果1号': [120, 132, 101, 134, 90, 230, 210, 134, 90, 230],
      '香蕉2号': [320, 332, 301, 334, 390, 330, 320, 301, 334, 390],
      '西瓜3号': [520, 532, 501, 0, 590, 530, 520, 501, 634, 590],
      '葡萄4号': [20, 32, 0, 34, 90, 30, 20, 21, 34, 90]
    }
  },

  here is my package.json

  {

"name": "vue-element-admin", "version": "4.4.0", "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features", "author": "Pan panfree23@gmail.com", "scripts": { "dev": "vue-cli-service serve", "lint": "eslint --ext .js,.vue src", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "new": "plop", "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", "test:unit": "jest --clearCache && vue-cli-service test:unit", "test:ci": "npm run lint && npm run test:unit" }, "dependencies": { "@form-create/element-ui": "^2.5.31", "@gjmh/element-ui": "^2.15.14-beta.1", "@toast-ui/editor": "^2.3.1", "@vueuse/core": "^10.3.0", "axios": "0.18.1", "clipboard": "2.0.4", "codemirror": "5.45.0", "core-js": "3.31.1", "driver.js": "0.9.5", "dropzone": "5.5.1", "echarts": "5.5.0", "file-saver": "2.0.1", "fuse.js": "3.4.4", "js-cookie": "2.2.0", "jsonlint": "1.6.3", "jszip": "3.2.1", "lodash": "^4.17.21", "normalize.css": "7.0.0", "nprogress": "0.2.0", "path-to-regexp": "2.4.0", "print-js": "^1.6.0", "screenfull": "4.2.0", "script-loader": "0.7.2", "sortablejs": "1.8.4", "uuid": "^9.0.0", "vue": "^2.7.14", "vue-count-to": "1.0.13", "vue-easy-lightbox": "^0.23.0", "vue-pdf-app": "^2.1.0", "vue-router": "3.0.2", "vue-splitpane": "1.0.4", "vue2-waterfall": "^3.0.1", "vuedraggable": "2.20.0", "vuex": "3.1.0", "xlsx": "0.14.1" }, "devDependencies": { "@vue/cli-plugin-babel": "4.5.19", "@vue/cli-plugin-eslint": "4.5.19", "@vue/cli-plugin-unit-jest": "4.5.19", "@vue/cli-service": "4.5.19", "@vue/test-utils": "1.0.0-beta.29", "autoprefixer": "9.5.1", "babel-eslint": "10.1.0", "babel-jest": "23.6.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "2.4.2", "chokidar": "2.1.5", "connect": "3.6.6", "eslint": "7.1.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-vue": "^9.15.1", "html-webpack-plugin": "3.2.0", "husky": "1.3.1", "lint-staged": "8.1.5", "mockjs": "1.0.1-beta3", "plop": "2.3.0", "runjs": "4.3.2", "sass": "1.26.2", "sass-loader": "8.0.2", "script-ext-html-webpack-plugin": "2.1.3", "serve-static": "1.13.2", "svg-sprite-loader": "5.0.0", "svgo": "1.2.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" }, "browserslist": [ "> 1%", "last 2 versions" ], "bugs": { "url": "https://github.com/PanJiaChen/vue-element-admin/issues" }, "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "keywords": [ "vue", "admin", "dashboard", "element-ui", "boilerplate", "admin-template", "management-system" ], "license": "MIT", "lint-staged": { "src/*/.{js,vue}": [ "eslint --fix", "git add" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "repository": { "type": "git", "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" } }

Current Behavior

error,could no create chart

Expected Behavior

create chart as official website case

Environment

- OS: win 10 
- Browser: Chrome 123.0.6312.86（正式版本） （64 位）
- Framework: vue@2.6.10

Any additional comments?

No response

[waterworld-warehouse]

`

`

sorry, here is my component code, I don't know why my answer code is not Standard.

[plainheart]

参阅 https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide/

[waterworld-warehouse]

here is my code

[waterworld-warehouse]

参阅 https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide/

Thank you for your answer. I know what's wrong.

import echarts from 'echarts'; // 或者按需引入 import echarts from 'echarts/lib/echarts'; 这两种方式，v5 中不再支持了。 使用者需要如下更改代码解决这个问题： import * as echarts from 'echarts';