import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, null, { renderer: 'svg' }); var option; option = { title: { text: '打开图片时间对比' }, xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] }, yAxis: { type: 'value' }, series: [ { data: [8.25, 8.61, 8.5, 8.07, 7.66, 7.29, 7.4, 7.56, 7.62, 7.32], type: 'line', smooth: true, label: { show: true, position: 'bottom', textStyle: { fontSize: 15 } } }, { data: [5.6, 5.51, 6.88, 6.02, 6.25, 5.66, 5.61, 6.08, 5.24, 5.17], type: 'line', smooth: true, label: { show: true, position: 'bottom', textStyle: { fontSize: 15 } } } ] }; option && myChart.setOption(option);
部分版本：
option = { title: { text: '打开图片时间对比' }, xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] }, yAxis: { type: 'value' }, series: [ { data: [8.25, 8.61,8.5,8.07,7.66,7.29,7.40,7.56,7.62,7.32], type: 'line', smooth: true, label: { show: true, position: 'bottom', textStyle: { fontSize: 15 } } }, { data: [5.6,5.51,6.88,6.02,6.25,5.66,5.61,6.08,5.24,5.17], type: 'line', smooth: true, label: { show: true, position: 'bottom', textStyle: { fontSize: 15 } } } ] };
折线图多条线主要就是
series: [ { data: [数值1，数值2，...], type: 'line', //线型 smooth: true, //平滑曲线 label: { //标签（即上标数字） show: true, //显示 position: 'bottom', textStyle: { fontSize: 15 //字体大小 } } }, //这是另外一个折线（要注意各个花括号的包含层序关系，防止冗余） { data: [数值3，数值4，...], type: 'line', //线型 smooth: true, //平滑曲线 label: { //标签（即上标数字） show: true, //显示 position: 'bottom', textStyle: { fontSize: 15 //字体大小 } } ]
如果不想显示上标数字，去掉label模块就好，即:
series: [ { data: [数值1，数值2，...], type: 'line', //线型 smooth: true, //平滑曲线 }, //这是另外一个折线（要注意各个花括号的包含层序关系，防止冗余） { data: [数值3，数值4，...], type: 'line', //线型 smooth: true, //平滑曲线 } ]
其实多看echart的文档手册就好↓（结合案列）
