echart 折线统计图

var myChart = echarts.init(document.getElementById('chart'));

$.get('is.json', function(data) {

myChart.setOption(option = {

legend: {

data: ["接单数", "金额"]

tooltip: {

trigger: 'axis'

xAxis: {

data: data.map(function(item) {

return item[0];

})

yAxis: [{

type: 'value',

name: '金额'

{

type: 'value',

name: '接单数
'

}

// splitLine: {

// show: true

// }

calculable: true,

toolbox: {

left: 'center',

feature: {

dataZoom: {

yAxisIndex: 'none'

restore: {},

saveAsImage: {}

}

dataZoom: [{

startValue: '2014-06-01'

}, {

type: 'inside'

}],

visualMap: {

show: false,

top: 10,

right: 10,

pieces: [{

gt: 0,

lte: 50,

color: '#2e88ff'

}],

outOfRange: {

color: '#2e88ff'

}

series: [{

"name": "金额",

"type": "line",

itemStyle: {

normal: {

lineStyle: {

color: '#b6a2de'

}

"data": data.map(function(item) {

return item[1];

}),

"smooth": true

}, {

"name": "接单数",

"type": "line",

yAxisIndex:1, //不加就不会出现第二个y轴的数据

itemStyle: {

normal: {

lineStyle: {

color: '#2ec7c9'

}

"data": data.map(function(item) {

return item[2];

}),

"smooth": true

}]

});

转载于:https://www.cnblogs.com/SunSong/p/7099531.html

echart 折线统计图相关推荐

echart 多柱图只显示部分数据标签_2分钟上手、3小时学会无代码软件开发---Echarts数据可视化...
1.引入 ECharts.min.js 库文件引入方式一:用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目) 引入方式二:库文件放于项目文件夹(本地部署项目及联网 ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
echart的关系图高亮_echart中饼状图的高亮显示。
1 2 3 4 5 6 7 8 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 14 15 16 17 18 19 20 / ...
echart的关系图高亮_echarts鼠标覆盖高亮显示节点及关系名称详解
js代码,使用了jquery和echarts.js,用的是源代码那版,因为待会要进源代码里修改-- 其实js代码和echart官网demo的代码完全没区别-- 普通的力图设置,只要加上focusNod ...
Echart图表X轴为时间轴的解释
2019独角兽企业重金招聘Python工程师标准>>> 绘制Echart图表,一般情况下x轴type: 'category',但有时候也用到type: 'time', 这两者的主要 ...
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
Echart的angularjs封装
ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 下面正题用原生js的话,引入echarts.js 无论是图表的样式设置,图表渲染,数据填充都是基于echa ...
Echart遇到的问题：tooltip提示框大小异常
Echart遇到的问题:tooltip提示框大小异常参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...
echart(2),模拟数据导入篇
先上图,就是介样子的: 所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据. 看代码截图: 1.总的框架图: 2.循环取数据的js代码: 3.echart提供额官方api的代码 ...
echart封装，前端简单路由，图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

echart 折线统计图

echart 折线统计图相关推荐

最新文章

热门文章