1.导入文件样式
从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。
2，引入 ECharts 文件
<scprpt src="echarts.min.js"></script>
3.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。(注意必须要给宽，高)
<div style="width:400px;height:500px;"></div>
4,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
5,然后就可以从echart官网复制想要的图放进去，底部调用
二.今天主要讲的是折线图各种属性修改：
先看修改过样式的
<script type="text/javascript"> function showLine(line) { var pie = echarts.init(document.getElementById('line-chart')); option = { title: { text: '某楼盘销售情况', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data: ['富德保险', '中国人寿', '其他'],//三条线 }, toolbox: { show: true, feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, xAxis: [ { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月', '10月', '11月','12月'],//x轴的label名 axisLabel: {textStyle: {fontSize: 16, color: '#fff'}},//x轴的label的文字颜色，大小 splitLine:{show:false},//x轴的网格线是否显示 axisLine: {//x轴的线的设置颜色和宽度 lineStyle: { color: '#0b2759', width: 3,//这里是为了突出显示加上的，可以去掉 } } } ], yAxis: [ { type: 'value', axisLabel: {textStyle: {fontSize: 16, color: '#fff',}}, splitLine:{show:true,lineStyle:{color:"#32528a"}}, axisLine: { lineStyle: { color: '#0b2759', width: 8,//这里是为了突出显示加上的，可以去掉 } }, } ], series: [ { name: '富德保险',// type: 'line', smooth: true, itemStyle: {//富德这条折线的颜色，区内颜色设置 normal: { color: '#6e5a1c', lineStyle: {color: '#c59b0d'}, areaStyle: {type: 'default'} } }, data: [10, 12, 21, 54, 260, 830, 710,89,123,45,23,88]//富德折线的数据 }, { name: '中国人寿', type: 'line', smooth: true, itemStyle: { normal: { color: '#085c45', lineStyle: {color: '#00b763'}, areaStyle: {type: 'default'} } }, axisLabel: {textStyle: {fontSize: 16, color: '#fff'}}, data: [30, 182, 434, 791, 390, 30, 10,1,2,45,35,1188] }, { name: '其他', type: 'line', smooth: true, itemStyle: { normal: { color: '#669866', lineStyle: {color: '#c6c6c6'}, areaStyle: {type: 'default'} } }, axisLabel: {textStyle: {fontSize: 16, color: '#fff'}},//1，x轴的label文字如：1月，2月字体颜色大小修改 data: [1320, 1132, 601, 234, 120, 90, 20,10, 12, 21, 54, 260]// } ] }; pie.setOption(option); } showLine('上海'); map.on('click', function (params) { line = params.name; showLine(line); });</script>
转载于:https://www.cnblogs.com/937522zy/p/6774778.html
相关资源：JAVA上百实例源码以及开源项目