echarts柱状图+折线图实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title>Top250电影数据分析</title><meta content="" name="descriptison"><meta content="" name="keywords"><meta name="referrer" content="never"><!-- Favicons --><link href="/static/assets/img/favicon.png" rel="icon"><link href="/static/assets/img/apple-touch-icon.png" rel="apple-touch-icon"><!-- Google Fonts --><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet"><!-- Vendor CSS Files --><link href="/static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/assets/vendor/icofont/icofont.min.css" rel="stylesheet"><link href="/static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"><link href="/static/assets/vendor/animate.css/animate.min.css" rel="stylesheet"><link href="/static/assets/vendor/venobox/venobox.css" rel="stylesheet"><link href="/static/assets/vendor/aos/aos.css" rel="stylesheet"><!-- Template Main CSS File --><link href="/static/assets/css/style.css" rel="stylesheet"><script src="/static/assets/js/echarts.min.js"></script>
</head>
<body><!-- ======= Header ======= --><header id="header"><div class="container"><div class="logo float-left"><h1 class="text-light"><a href="/"><span>Top250</span></a></h1><!-- Uncomment below if you prefer to use an image logo --><!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>--></div><nav class="nav-menu float-right d-none d-lg-block"><ul><li class="active"><a href="/">首页 <i class="la la-angle-down"></i></a></li><li><a href="/movie">电影</a></li><li><a href="/dataview">数据</a></li><li class="drop-down"><a >词云</a><ul><li><a href="/wordcloud/gjz">关键词</a></li><li><a href="/wordcloud/guojia">国家</a></li><li><a href="/wordcloud/leibie">电影类别</a></li></ul></li><li><a href="/qiangyuecheng">作者</a></li></ul></nav><!-- .nav-menu --></div></header><!-- End Header --><main id="main"><!-- ======= Services======= --><section id="services" class="services"><div class="container"><div class="section-title"><h2>评分分布</h2></div><div class="row"><div id="echart" style="width: 100%;height:400px;"></div></div></div></section><!-- End Services Section --></main><!-- End #main --><a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a><!-- Vendor JS Files --><script src="/static/assets/vendor/jquery/jquery.min.js"></script><script src="/static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script><script src="/static/assets/vendor/jquery.easing/jquery.easing.min.js"></script><script src="/static/assets/vendor/php-email-form/validate.js"></script><script src="/static/assets/vendor/jquery-sticky/jquery.sticky.js"></script><script src="/static/assets/vendor/venobox/venobox.min.js"></script><script src="/static/assets/vendor/waypoints/jquery.waypoints.min.js"></script><script src="/static/assets/vendor/counterup/counterup.min.js"></script><script src="/static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script><script src="/static/assets/vendor/aos/aos.js"></script><!-- Template Main JS File --><script src="/static/assets/js/main.js"></script>
<script language="JavaScript">// Generate datavar myChart = echarts.init(document.getElementById('echart'));
// option
option = {backgroundColor: '#0f375f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {{#alert(JSON.stringify(params[0]));#}showstr = ""if (params.length>0){showstr = params[0].name+"<br/>"}if(params.length==3){showstr += params[0].marker+" "+params[0].seriesName+": "+params[0].data+"<br/>"}else if(params.length==4){showstr += params[0].marker+" "+params[0].seriesName+": "+params[0].data+"<br/>"showstr += params[1].marker+" "+params[1].seriesName+": "+params[1].data+"<br/>"}else {if(params[0].seriesName=="dotted"){return ""}showstr += params[0].marker+" "+params[0].seriesName+": "+params[0].data+"<br/>"}return showstr}},legend: {data: ['评价人数', '电影数量'],textStyle: {color: '#ccc'}},xAxis: {data: {{ pfmap.pf }},axisLine: {lineStyle: {color: '#ccc'}}},yAxis: [{name:'人',type:'value',max:100,splitLine: {show: false},axisLine: {onZero: false,lineStyle: {color: '#FFFFFF'},}},{name: '人',type: 'value',splitLine: {show: false},axisLine: {onZero: false,lineStyle: {color: '#FFFFFF'},}},],series: [{name: '评价人数',type: 'line',smooth: true,showAllSymbol: true,symbol: 'emptyCircle',symbolSize: 15,data: {{ pjnum }},yAxisIndex: 1,}, {name: '电影数量',type: 'bar',barWidth: 10,itemStyle: {barBorderRadius: 5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#14c8d4'},{offset: 1, color: '#43eec6'}])},data: {{ pfmap.sum }},yAxisIndex: 0,},{name: '评价人数',type: 'bar',barGap: '-100%',barWidth: 10,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: 'rgba(20,200,212,0.5)'},{offset: 0.2, color: 'rgba(20,200,212,0.2)'},{offset: 1, color: 'rgba(20,200,212,0)'}])},z: -12,data: {{ pjnum }},yAxisIndex: 1,}, {name: 'dotted',type: 'pictorialBar',symbol: 'rect',itemStyle: {color: '#0f375f'},symbolRepeat: true,symbolSize: [12, 4],symbolMargin: 1,z: -10,data: {{ pjnum }},yAxisIndex: 1,}]
};
myChart.setOption(option);
</script>
</body>
</html>

echarts柱状图+折线图实例相关推荐

从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
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实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...

echarts柱状图+折线图实例

echarts柱状图+折线图实例相关推荐

最新文章

热门文章