完整代碼
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、圖表上的數據標識
