Question

一个折线图的问题，在echarts实例中调试的是正常的，但是粘贴到vue中legend始终不显示，大佬解答下

粉色的是在vue中的显示，底部缺少legend,第一个图是在官网实例中调试的效果显示图，以下是代码option = { tooltip: { trigger: 'axis' }, legend: { left:'34%', bottom:'0%', textStyle: { color: '#000000', fontSize: 20, }, data:['进店量','试乘试驾量'] }, grid: { left: '5%', right: '4%', top: '10%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: true, position:'bottom', //x轴的位置 axisLine:{ show:true, // 显示x轴线 lineStyle: { //设置x轴的颜色 color: '#DDDDDD', } }, axisTick: { //刻度线和标签对齐 alignWithLabel:true, }, data: ['8-27','8-28','8-29','8-30'] }, yAxis: { type: 'value', axisLine:{ show:false, // 隐藏y轴线 }, axisLabel:{ //改变刻度上数字的颜色 color:'#dddddd' }, axisTick:{ show:false //隐藏刻度标签 }, splitLine:{ lineStyle:{ color:'#DDDDDD', type:'dashed' } }, }, series: [ { name:'进店量', type:'line', symbol:'circle',//拐点样式 symbolSize: 3,//拐点大小 itemStyle : { normal : { color: "#4CB5FF", lineStyle:{ width:1,//折线宽度 color:"#4CB5FF"//折线颜色 } } }, data: [79, 98, 60,80] }, { name:'试乘试驾量', type:'line', symbol:'circle',//拐点样式 symbolSize: 3,//拐点大小 itemStyle : { normal : { color: "#43DEBC", lineStyle:{ width:1,//折线宽度 color:"#43DEBC"//折线颜色 } } }, data:[40, 80, 32, 74] } ] };
代码不是很清除，我再截个图





Answer 1

我也遇到同样的问题了，解决办法是需要引入echarts 中的legend组件才会显示，大概是"./node_modules/echarts/lib/component/legend",你试一下如果还不行就看一下data中的命名是否与name值对应。

Answer 2

e" for the country and the world