C# Echarts 折线图 实例

1.导入echarts.js

2.配置option

<div id="main" style="width: 100%;height:660px;">var obj = document.getElementById('main');//初始化echarts实例var myChart = echarts.init(obj);
// option将要设置以下字段感觉就足够使用了
option= {legend: {},xAxis: {},yAxis: {},label: {},tooltip: {},series: []
}

3.legend字段

legend: {
data: [‘招商银行’, ‘浦发银行’, ‘广发银行’, ‘上海银行’]
},

4.xAxis，配置x轴数据、样式、名称

xAxis: {type: 'category',   // 还有其他的type，可以去官网喵两眼哦data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据name: '日期',   // x轴名称// x轴名称样式nameTextStyle: {fontWeight: 600,fontSize: 18}
},

5.yAxis，配置y轴名称，样式

yAxis: {type: 'value',name: '纵轴名称',   // y轴名称// y轴名称样式nameTextStyle: {fontWeight: 600,fontSize: 18}
}

6.tooltip，鼠标放到折线图上展示的数据展示样式

 tooltip: {trigger: 'axis'   // axis   item   none三个值},

7.series，y轴数据，每条折线的名称

series: [{name: '招商银行',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'},{name: '浦发银行',data: [620, 711, 823, 934, 1445, 1456, 1178],type: 'line'},{name: '广发银行',data: [612, 920, 1140, 1160, 1190, 1234, 1321],type: 'line'},{name: '上海银行',data: [234, 320, 453, 567, 789, 999, 1200],type: 'line'}
]

8.渲染

   myChart.setOption(option);