echart图片库_百度ECharts绘图库的使用

百度绘图库，Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目，百度出的库太牛了，啥功能都有 https://echarts.apache.org 您可以现在就前往 Apache 官网以获取最新版的网站信息，下面是我总结的一些前端用法，可以配合web框架搞事情。

简单折线图：

Title

var display = function(time,cpu){

var myChart_cpu = echarts.init(document.getElementById('main_cpu'));

myChart_cpu.setOption({

title: {

text: '监控'

},

tooltip: {},

xAxis: {

data: []

},

yAxis: {},

series: [{

name: 'cpu',

type: 'line',

data: []

}]

});

// 下方就是给指定字段填充数据

myChart_cpu.setOption({

xAxis: {

data: time

},

series: [{

name: 'cpu', // 根据名字对应到相应的系列

data: cpu

}]

});

};

// 首次显示加载动画

myChart_cpu.showLoading();

var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]

var mem = [10,20,30,40,10,2]

display(time,mem)

一个带颜色的折线图：

var display = function(time,cpu){

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

myChart.setOption({

xAxis:{

type:"category",

boundaryGap:false,

data:[]

},

yAxis:{

type:"value"

},

series:[{

data:[],

type:"line",

areaStyle:{}

}]

});

myChart.setOption({

xAxis: {

data: time

},

series: [{

data: cpu

}]

});

};

myChart.showLoading();

var time = ["12:10","12:11","12:12","12:13","12:14"]

var cpu = [10,5,25,10,2]

display(time,cpu)

平滑折线图：

var display = function(time,cpu){

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

myChart.setOption({

xAxis:{

type:"category",

data:[]

},

yAxis:{

type:"value"

},

series:[{

data:[],

type:"line",

smooth:true

}]

});

myChart.setOption({

xAxis: {

data: time

},

series: [{

data: cpu

}]

});

};

myChart.showLoading();

var time = ["12:10","12:11","12:12","12:13","12:14"]

var cpu = [10,5,25,10,2]

display(time,cpu)

两个线条的图表

var display = function(time,load_5,load_10){

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

myChart.setOption({

xAxis: {

type: 'category',

boundaryGap: false,

},

yAxis: {

type: 'value'

},

series: [

{

type:'line',

stack: '总量',

data:load_5

},

{

type:'line',

stack: '总量',

data:load_10

}

]

});

};

myChart.showLoading();

var time = ["12:10","12:11","12:12","12:13","12:14"]

var load_5 = [10,5,25,10,2]

var load_10 = [24,37,15,18,9]

display(time,load_5,load_10)

柱状图：

// 基于准备好的dom，初始化echarts实例

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

var option = {

tooltip: {},

legend: {

data:['']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

myChart.setOption(option);

最后将图形合并为一个 常用于开发内嵌到页面中

Title

var myChart_cpuutils = echarts.init(document.getElementById('main_cpu'));

option_cpuutils = {

series: [

{

name: 'CPU利用率',

type: 'gauge',

detail: {formatter:'{value}%'},

data: [{value: [12], name: 'CPU使用率'}]

}

]

};

myChart_cpuutils.showLoading();

setInterval(function () {

myChart_cpuutils.hideLoading();

myChart_cpuutils.setOption(option_cpuutils, true);

},2000);

var myChart_fssize = echarts.init(document.getElementById('main_fssize'));

option_fssize = {

series : [

{

name: '磁盘情况',

type: 'pie',

radius: '80%',

roseType: 'angle',

detail: {formatter:'{value}'},

data:[

{value: 20, name:'磁盘用量'},

{value: 80, name:'磁盘空闲'}

]

}

]

};

myChart_fssize.showLoading();

setInterval(function () {

myChart_fssize.hideLoading();

myChart_fssize.setOption(option_fssize, true);

},2000);

var myChart_memory = echarts.init(document.getElementById('main_memory'));

option_memory = {

tooltip : {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

left: 'left',

},

series : [

{

type: 'pie',

radius : '80%',

center: ['50%', '50%'],

data:[

{value:100, name:'已用'},

{value:800, name:'剩余'}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

myChart_memory.showLoading();

setInterval(function () {

myChart_memory.hideLoading();

myChart_memory.setOption(option_memory, true);

},2000);

多个线条的绘制。

{% extends "admin/base_site.html" %}

{% load i18n static %}

{% load static %}

{% block content %}

var echo =echarts.init(document.getElementById("echo"));

var option = {

title: {

left: 'left',

text: 'CPU',

},// tooltip 鼠标放上去之后会自动出现坐标

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

label: {

backgroundColor: '#6a7985'

}

}

},// toolbox = 菜单栏中的各种小功能

toolbox: {

feature: {

dataZoom: {

yAxisIndex: 'none'

},

restore: {},

saveAsImage: {}

}

},

legend: {

data: ['CPU利用率', '1分钟负载', '5分钟负载', '15分钟负载']

},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value'

},

series: [{

name: "CPU利用率",

stack: "总量",

data: [10, 54, 87, 66, 54, 88, 95],

type: 'line'

},

{

name: "1分钟负载",

stack: "总量",

data: [10, 25, 99, 87, 54, 66, 2],

type: 'line'

},

{

name: "5分钟负载",

stack: "总量",

data: [89, 57, 85, 44, 25, 4, 54],

type: 'line'

},

{

name: "15分钟负载",

stack: "总量",

data: [1, 43, 2, 12, 5, 4, 7],

type: 'line'

}

]

};

echo.setOption(option,true);

{% endblock %}