Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use jQuery plug-in Echarts to achieve biaxial effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use jQuery plug-in Echarts to achieve biaxial effect" article can help you solve the problem.

1. Problem description:

Use Echarts to make a line chart on the condition that there are three broken lines, one representing availability and the other two representing quantity.

2. Implement source code:

Echarts- biaxial body,html {width: 99%; height: 99%; font-family: "Microsoft Yahei"; font-size: 12px;} # double {width: 100%; height: 100%; font-family: "agency fb"; font-weight: bolder } $(function () {var chart = document.getElementById ('double'); var echart = echarts.init (chart)) Var option = {title: {text: 'availability', subtext:'', x: 'center', align:' right'}, grid: {bottom: 80}, tooltip: {trigger: 'axis' AxisPointer: {animation: false}, formatter: function (params) {var res = params [0] .name For (var I = 0, l = params.length; I < l; iTunes +) {if (iParams0) {res + =''+ params [I] .seriesName +':'+ params.value + "%" } else {res + =''+ params [I] .seriesName +':'+ params[ I] .value;}} return res }}, legend: {data: ['availability', 'Atropy left''], x: 'left'}, xAxis: [{type:' category', axisLabel: {rotate: 45} BoundaryGap: false, axisLine: {onZero: false}, data: ['January', 'February 2016', 'March 2016', 'April 2016', 'May 2016', 'June 2016', 'July 2016', 'August 2016', 'September 2016', 'October 2016', 'November 2016' December 2016] .map (function (str) {return str.replace (','\ n')})], yAxis: [{name: 'availability', type: 'value', max: 100 AxisLabel: {show: true, interval: 'auto', formatter:' {value}%'}}, {name: 'aversion, nameLocation:' start', type: 'value' Inverse: true}, {name:' bandwidth, nameLocation: 'start', type:' value', inverse: true}], series: [{name:' availability' Type:'line', hoverAnimation: false, itemStyle: {normal: {label: {show:false, position:'top' Formatter:' {c}%'}, areaStyle: {normal: {}} LineStyle: {normal: {width: 1}}, data: [12,78,34,67,88,45,65,77,31,21,90,54]}, {name:'A', type:'line', yAxisIndex:1, hoverAnimation: false AreaStyle: {normal: {}}, lineStyle: {normal: {width: 1}}, data: [1,4,5,8,3,2,7,6,9,2,4,3]} {name:'B', type:'line', yAxisIndex:1, hoverAnimation: false, areaStyle: {normal: {}} LineStyle: {normal: {width: 1}}, data: [0,2,3,7,1,0,5,2,6,1,2,1]}]} Echart.setOption (option);})

3. Realize the effect picture:

This is the end of the content on "how to use the jQuery plug-in Echarts to achieve biaxial effect". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.