<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine :{ lineStyle:{ color:'#912CEE' } } }, yAxis: { type: 'value', axisLine :{ lineStyle:{ color:'#87CEFA' } } }, title: { text: '折线图', subtext: '模拟数据', x: 'center' }, tooltip: { trigger: 'axis' }, //工具框，可以选择 toolbox: { feature: { saveAsImage: {} //下载工具 } }, legend: { // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） orient: 'horizontal', // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） x: 'left', // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） y: 'top', data: ['现价','原价'] }, series: [ // 1: { name:"现价", data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', symbol: 'circle', itemStyle: { normal: { label : { show: true } }, lineStyle:{ // 使用rgba设置折线透明度为0，可以视觉上隐藏折线 color: 'rgba(0,0,0,0)' } } } , // 2: { name:"原价", data: [444, 567, 890, 211, 4322, 532, 4356], type: 'line', color:"#36ee4f", symbol: 'circle', itemStyle: { normal: { label : { show: true } }, lineStyle:{ // 使用rgba设置折线透明度为0，可以视觉上隐藏折线 color: 'rgba(0,0,0,0)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
