Echarts 简单的柱形+折线+饼图
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>echarts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> </head> <body style="height: 100%; margin: 0"> <div id="container" style="width: 100%;height: 100%"></div> <script crossorigin="anonymous" integrity="sha384-et+fqdf7kslHL5Ip8rXSJPUPODLa7eMfpFTBaCfnlMzrcAz/wxI5Xm/mNTZwd+7H" src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script> <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script> <script type="text/javascript"> $(function () { var colors = ["#5793f3", "#d14a61", "#675bba", "#cccccc"]; const optMap = { color: colors, tooltip: { trigger: 'item', axisPointer: { type: 'cross' } }, grid: { left: '50%', top: '55%' }, legend: { data: ['蒸发量', '降水量', '平均温度'] }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] } ], yAxis: [ { type: 'value', name: '温度', min: 0, max: 25, position: 'left', axisLine: { lineStyle: { color: colors[2] } }, axisLabel: { formatter: '{value} °C' } } ], series: [ { name: '蒸发量', type: 'bar', 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] }, { name: '平均温度', type: 'line', 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] }, { type: 'pie', radius: ['0%', '30%'], center: ['30%', '75%'], labelLine: { show: false }, label: { show: true, position: 'inside' }, data: [ { value: 1, name: '1' }, { value: 2, name: '2' }, { value: 3, name: '3' }, { value: 4, name: '4' }, ] } ] }; const pieLineBar = echarts.init(document.querySelector("#container")); pieLineBar.setOption(optMap); }); </script> </body> </html>
参考
https://echarts.apache.org/zh/option.html#title