echarts月份折线图

效果图:

<script src="libs/jquery/js/echarts.min.js"></script>

div

<div id="zhexian2" style="height: 330px"></div>

script

</script><script>var myChart = echarts.init(document.getElementById('zhexian2'));option = {// backgroundColor: '#424956',title: {// text: '请求数',textStyle: {fontWeight: 'normal',fontSize: 16,color: '#F1F1F3'},left: '6%'},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#57617B'}}},legend: {icon: 'rect',itemWidth: 14,itemHeight: 5,itemGap: 13,data: ['所得税', '减免'],right: '4%',textStyle: {fontSize: 12,color: '#292f39'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: '#57617B'}},data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月']}],yAxis: [{type: 'value',name: '单位（亿元）',axisTick: {show: false},axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {margin: 10,textStyle: {fontSize: 14}},splitLine: {lineStyle: {color: '#57617B'}}}],series: [{name: '所得税',type: 'line',smooth: true,symbol: 'circle',symbolSize: 5,showSymbol: false,lineStyle: {normal: {width: 3}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(16,97,204, 0.3)'}, {offset: 0.8,color: 'rgba(17,235,210, 0)'}], false),shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10}},itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(16,97,204,1)'}, {offset: 1,color: 'rgba(17,235,210,1)'}])},emphasis: {color: 'rgb(0,196,132)',borderColor: 'rgba(0,196,132,0.2)',extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',borderWidth: 10}},data: [220, 182, 191, 134, 150, 120, 110, 125,240,200,145,155]}, {name: '减免',type: 'line',smooth: true,symbol: 'circle',symbolSize: 5,showSymbol: false,lineStyle: {normal: {width: 3}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(205,52,42, 0.5)'}, {offset: 0.8,color: 'rgba(235,235,21, 0)'}], false),shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10},},itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(205,52,42,1)'}, {offset: 1,color: 'rgba(235,235,21,1)'}])},emphasis: {color: 'rgb(99,250,235)',borderColor: 'rgba(99,250,235,0.2)',extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',borderWidth: 10}},data: [120, 110, 125, 145, 122, 165, 122, 220,220, 182, 191,198]}  ]};myChart.setOption(option);
</script>

echarts月份折线图相关推荐

php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题在使用echarts折线图做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
基于osp平台和Echarts的折线图案例
前端代码: 利用ajax传递json串来实现前后台分离 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...

echarts月份折线图

echarts月份折线图相关推荐

最新文章

热门文章