echarts为什么这段代码不生效，一样的代码我放别的地方可以正常运行
我这一样的代码，我放在echarts官网上跑的效果
我放在自己项目跑的效果
我也放在我另一个项目上试了也是正常排序的，就是放到我公司项目上就不一样了。我看了echarts以前是4.1.0版本，我也试了给他升级了最新的版本5.1.2。可是还是不生效，像请问还有什么方面会影响到这个表的显示方法。我公司的项目代码是18年的vue和elementul项目，现在接着写的，会不会是某些东西版本低也会影响到echarts呢。
barGraph() {
var myChart = this.$echarts.init(this.$refs["echart-right"]);
var cate = [
"东湖店",
"楚河汉街店",
"光谷店",
"长江大桥店",
"汉口路店",
"汉口江滩店",
"晴川阁店",
"晴阁店",
"晴川店",
"晴川阁店1",
];
var barData = [730, 801, 924, 1259, 1600, 411, 1090, 888, 466, 877];
//排行榜数组排序
var option = {
title: {
text: this.rightname + "合格率排行榜top10",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//不显示X轴刻度线和数字
splitLine: { show: false },
axisLabel: { show: false },
},
yAxis: {
type: "category",
data: cate,
inverse: true,
realtimeSort: true,
splitLine: { show: false },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
//key和图间距
offset: 10,
//动画部分
animationDuration: 300,
animationDurationUpdate: 300,
//key文字大小
nameTextStyle: {
fontSize: 5,
},
},
series: [
{
realtimeSort: true,
name: "数量",
type: "bar",
data: barData,
barWidth: 14,
barGap: 10,
smooth: true,
valueAnimation: true,
//Y轴数字显示部分
label: {
normal: {
show: true,
position: "right",
valueAnimation: true,
offset: [5, -2],
textStyle: {
color: "#333",
fontSize: 13,
},
},
},
itemStyle: {
emphasis: {
barBorderRadius: 7,
},
//颜色样式部分
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "#3977E6" },
{ offset: 1, color: "#37BBF8" },
]),
},
},
},
],
//动画部分
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
这是我package.json文件
{
"name": "spot",
"version": "1.2.2",
"description": "",
"author": "Joy",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "gulp"
},
"dependencies": {
"axios": "0.17.1",
"babel-plugin-component": "0.10.1",
"babel-polyfill": "6.26.0",
"dark": "0.0.1",
"default-passive-events": "^2.0.0",
"echarts": "^5.1.2",
"element-ui": "2.13.2",
"gulp-concat": "2.6.1",
"gulp-load-plugins": "1.5.0",
"gulp-replace": "0.6.1",
"gulp-shell": "0.6.5",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"sass-loader": "6.0.6",
"svg-sprite-loader": "3.7.3",
"vue": "2.5.2",
"vue-cookie": "1.1.4",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"xlsx": "^0.14.1"
},
"devDependencies": {
"autoprefixer": "7.1.2",
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-jest": "21.0.2",
"babel-loader": "7.1.1",
"babel-plugin-dynamic-import-node": "1.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "1.3.2",
"babel-preset-stage-2": "6.22.0",
"babel-register": "6.22.0",
"chalk": "2.3.0",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "4.0.1",
"cross-spawn": "5.0.1",
"css-loader": "0.28.0",
"eslint": "3.19.0",
"eslint-config-standard": "10.2.1",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.7.1",
"eslint-plugin-html": "3.0.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.2.0",
"eslint-plugin-promise": "3.5.0",
"eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "0.9.6",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "1.1.4",
"friendly-errors-webpack-plugin": "1.6.1",
"gulp": "^4.0.2",
"html-webpack-plugin": "2.30.1",
"jest": "21.2.0",
"jest-serializer-vue": "0.3.0",
"nightwatch": "0.9.12",
"node-notifier": "5.1.2",
"node-sass": "^6.0.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.2.0",
"portfinder": "1.0.13",
"postcss-import": "11.0.0",
"postcss-loader": "2.0.8",
"rimraf": "2.6.0",
"sass-loader": "^6.0.6",
"selenium-server": "3.0.1",
"semver": "5.3.0",
"shelljs": "0.7.6",
"uglifyjs-webpack-plugin": "1.1.1",
"url-loader": "0.5.8",
"vue-jest": "1.0.2",
"vue-loader": "13.3.0",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.5.2",
"webpack": "3.6.0",
"webpack-bundle-analyzer": "2.9.0",
"webpack-dev-server": "2.9.1",
"webpack-merge": "4.1.0"
},
"engines": {
"node": ">= 8.11.1",
"npm": ">= 5.6.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}