完整代码
import * as echarts from 'echarts';
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var colors = ['#5470C6', '#EE6666']; option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { right: '10%', bottom: "10%" }, toolbox: { //工具栏 feature: { dataView: {show: true, readOnly: true},//是否显示 数据视图 按钮，以及数据视图是否为 只读模式 restore: {show: true}, //是否显示 还原 按钮 saveAsImage: {show: true} //是否显示 保为图片 按钮 } }, legend: { data: [ '温度','降水量'] }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisLabel: { //轴上的字 字体、样式 inside: false, textStyle: { color: 'red', fontSize:'10', itemSize:'' } }, } ], yAxis: [ { type: 'value', name: '降水量', ////min: 0, //max: 250, position: 'right', axisLine: { //轴线 show: true, lineStyle: { color: colors[0] } }, axisLabel: { formatter: '{value} ml' }, splitLine: { //网格线 show: false } }, { type: 'value', name: '温度', //min: 0, //max: 25, position: 'left', axisLine: { show: true, lineStyle: { color: colors[1] } }, axisLabel: { formatter: '{value} ℃' }, splitLine: { //网格线 show: true } } ], series: [ { name: '降水量', type: 'line', yAxisIndex: 0, data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], label: { //图表上的数据标识 normal: { show: true, position: "top", //数值的位置 distance: 0, //数值距离折线的距离 fontSize: 13, //数值的字体大小 color: "#8ca0dd", //数值的颜色 }, }, axisTick:{ //刻度线 show:false } }, { name: '温度', type: 'line', yAxisIndex: 1, data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], label: { //轴线标识 normal: { show: true, position: "top", //数值的位置 distance: 0, //数值距离折线的距离 fontSize: 13, //数值的字体大小 color: "red", //数值的颜色 }, }, } ] }; option && myChart.setOption(option);
1、echarts官网
https://echarts.apache.org/zh/index.html
2、github 地址
https://github.com/apache/echarts
3、工具栏
4、x轴字体及样式调整
5、轴线
6、网格线
7、图表上的数据标识
