前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts图 示例

echarts图 示例

作者头像
zhengzongwei
发布2019-07-30 20:00:07
5480
发布2019-07-30 20:00:07
举报
文章被收录于专栏:Python | Blog

版权声明:Copyright © https://cloud.tencent.com/developer/article/1476320

占位图

option = {

title: {

text: ‘80%’,

x: ‘center’,

y: ‘center’,

textStyle: {

fontWeight: ‘normal’,

color: ‘#0580f2’,

fontSize: ‘90’

}

},

color: ‘rgba(176, 212, 251, 1)’,

legend: {

show: true,

itemGap: 12,

data: ‘01’, ‘02’

},

代码语言:javascript
复制
series: [{
    name: 'Line 1',
    type: 'pie',
    clockWise: true,
    radius: ['50%', '66%'],
    itemStyle: {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        }
    },
    hoverAnimation: false, 
    data: [{
        value: 80,
        name: '01',
        itemStyle: {
            normal: {
                color: { // 完成的圆环的颜色
                    colorStops: [{
                        offset: 0,
                        color: '#00cefc' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#367bec' // 100% 处的颜色
                    }]
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            } 
        }
    }, {
        name: '02',
        value: 20
    }]
}]

}

水平柱图

var myColor=’#0096f3’;

option = {

backgroundColor:’#0e2147’,

grid: {

left: ‘0%’,

top:‘0%’,

right: ‘0%’,

bottom: ‘8%’,

containLabel: true

},

xAxis: [{

show: false,

}],

yAxis: [{

axisTick:‘none’,

axisLine:‘none’,

offset:‘27’,

axisLabel: {

textStyle: {

color: ‘#ffffff’,

fontSize:‘16’,

}

},

data: ‘8’,

}, {

axisTick:‘none’,

axisLine:‘none’,

axisLabel: {

textStyle: {

color: ‘#ffffff’,

fontSize:‘16’,

}

},

data: ‘100%’

},{

代码语言:javascript
复制
            axisLine:{
              lineStyle:{
                color:'rgba(0,0,0,0)'
              }
            },
            data: [],
    }],
    series: [{
        name: '条',
        type: 'bar',
        stack:'圆',
        yAxisIndex: 0,
        data: [0],
        label:{
              normal:{
                show:true,
                position:'right',
               
                formatter:function(param){
                  return param.value + '%';
                },
                textStyle:{
                   color: '#ffffff',
                   fontSize:'16',
                }
              }
        },
        barWidth: 24,
        itemStyle: {
            normal: {
                color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                },
            }
        },
        z: 2
    }, {
        name: '白框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [99.4],
        barWidth: 20,
        itemStyle: {
            normal: {
                color: '#0e2147',
               
            }
        },
        z: 1
    }, {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: [100],
        barWidth: 24,
        itemStyle: {
            normal: {
                color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                },
              
            }
        },
        z: 0
    }, 
    
       
    ]
};


// 谷峰图
option = {
backgroundColor: '#00265f',

tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#57617B'
        }
    }
},
legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['增长数'],
    right: '4%',
    textStyle: {
        fontSize: 12,
        color: '#F1F1F3'
    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    data: ['4号',  '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
    type: 'value',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    axisLabel: {
        margin: 10,
        textStyle: {
            fontSize: 14
        }
    },
    splitLine: {
        show: false
    }
}],
series: [{
    name: '增长数',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
        normal: {
            width: 1
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5ff6e9'
            }, {
                offset: 0.8,
                color: '#7370fd'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
        }
    },
    itemStyle: {
        normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12

        }
    },
    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]

};

// 折线图

option = {

color: ’#3398DB’,

title: {

text: ‘各省数据合格率统计’,

//textStyle: {

// color: ‘#fff’

//}

},

tooltip: {

trigger: ‘axis’,

axisPointer: {

type: ‘shadow’

},

formatter: “{b}

合格率: {c}%”

},

/legend: {

data: date

},/

grid: {

left: ‘4%’,

right: ‘4%’,

bottom: ‘2%’,

containLabel: true

},

xAxis: {

type: ‘value’,

boundaryGap: 0, 0.01,

min: 0,

max: 100,

interval: 20,

axisLabel: {

formatter: ‘{value}%’,

textStyle: {

//color: ‘#fff’,

fontWeight: ‘80’

}

}

},

yAxis: {

type: ‘category’,

data: ’<20%’, ‘20%-40%’, ‘40%-60%’, ‘60%-80%’, ‘>=80%’,

axisLabel: {

show: true,

interval: 0,

rotate: 0,

margin: 10,

inside: false,

textStyle: {

//color: ‘#fff’,

fontWeight: ‘50’

}

}

},

series: [{

type: ‘bar’,

label: {

normal: {

show: true,

// formatter: ‘{c}’,

formatter: function(v) {

var val = v.data;

if (val == 0) {

return ‘’;

}

return val;

},

color: ‘#fff’

}

},

data: 22, 33, 55, 77, 88

}]

};

动态数据

option = {

title: {

text: ‘动态数据’,

subtext: ‘纯属虚构’

},

tooltip: {

trigger: ‘axis’,

axisPointer: {

type: ‘cross’,

label: {

backgroundColor: ‘#283b56’

}

}

},

legend: {

data:‘最新成交价’, ‘预购队列’

},

toolbox: {

show: true,

feature: {

dataView: {readOnly: false},

restore: {},

saveAsImage: {}

}

},

dataZoom: {

show: false,

start: 0,

end: 100

},

xAxis: [

{

type: ‘category’,

// boundaryGap: true,

data: timesDate()

},

],

yAxis: [

{

type: ‘value’,

scale: true,

name: ‘价格’,

max: 30,

min: 0,

boundaryGap: 0.7, 0.2

},

],

series: [

{

name:‘最新成交价’,

type:‘line’,

smooth: true,

symbolSize: 5,

symbol: ‘circle’,

showSymbol: false,

areaStyle:{

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(0, 187, 237, 0.5)’

}, {

offset: 0.8,

color: ‘rgba(0, 189, 237, 0)’

}], false),

shadowColor: ‘rgba(0, 0, 0, 0.1)’,

shadowBlur: 10

}

},

markPoint:{

symbolSize: 10,

symbol: ‘circle’,

data:[{

coord:9, 2

}],

label:{

normal:{

show: true,

position: ‘top’,

formatter: function(params) {

if (params.dataIndex === 8){

return ‘{b}’

}

}

}

},

},

markLine: {

data: [

{yAxis: 8, name: ‘实时’}

]

},

data:rwD()

}

]

};

var r = [];

r = rwD();

setInterval(function (){

axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,’’);

代码语言:javascript
复制
var data1 = option.series[0].data;
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
var markData = data1[data1.length-1];
option.series[0].markPoint.data[0].coord[1] = markData;
option.series[0].markLine.data[0].yAxis = markData;

myChart.setOption(option);

}, 2100);

function rwD () { // y轴数据内容更新

var res = [];

var len = 0;

while (len < 10) {

res.push((Math.random()10 + 5).toFixed(1) - 0);

len++;

}

return res;

}

function timesDate(){ // x轴曲线时间

var now = new Date();

var res = [];

var len = 10;

while (len–) {

res.unshift(now.toLocaleTimeString().replace(/^\D/,’’));

now = new Date(now - 20000);

}

return res;

}

动态数据2

var barColor = [];

var emColor = [];

var color0 = "#089280", “#af540b”, “#17559e”;

var color10 = ’#12ffd0’, ‘#ffcc00’, ‘#0cb0ed’;

if (navigator.userAgent.indexOf(“MSIE 8.0”) > 0) {

for (var i = 0; i < color0.length; i++) {

barColori = {

color: color0i,

}

emColori = {

color: color10i

}

}

} else {

for (var j = 0; j < color0.length; j++) {

barColorj = {

color: {

colorStops: [{

offset: 0,

color: color0j // 0% 处的颜色

}, {

offset: 1,

color: color10j // 100% 处的颜色

}]

}

}

emColorj = {

color: {

colorStops: [{

offset: 0,

color: color10j // 0% 处的颜色

}, {

offset: 1,

color: color0j // 100% 处的颜色

}]

}

}

}

}

//图表默认数组

var xzhou2 = [],

yzhou2 = [],

zzhou2 = [],

xzhou3 = [],

yzhou3 = [],

zzhou3 = []; //节拍

for (var i = 0; i <= 40; i++) {

xzhou2i = 0;

yzhou2i = 0;

zzhou2i = 0;

xzhou3i = 0;

yzhou3i = 0;

zzhou3i = 0;

}

option = {

backgroundColor: ‘#203958’,

tooltip: {

trigger: ‘axis’,

axisPointer: {

lineStyle: {

color: ‘#ddd’

}

},

backgroundColor: ‘rgba(255,255,255,1)’,

padding: 5, 10,

textStyle: {

color: ‘#7588E4’,

},

extraCssText: ‘box-shadow: 0 0 5px rgba(0,0,0,0.3)’

},

legend: {

show: true,

shadowColor: “#fff”,

shadowBlur: 5,

shadowOffsetX: 5,

data: ‘X轴’, ‘Y轴’, ‘Z轴’,

top: ‘5%’,

// left: “18%”,

textStyle: {

color: ‘#fff’,

fontSize: 14

// padding: 3, 20, 5, 7

},

// itemWidth: 64,

itemHeight: 10

},

grid: {

top: ‘30%’,

left: ‘7%’,

right: ‘8%’,

bottom: ‘10%’,

containLabel: true

},

xAxis: {

type: ‘category’,

data: (function() {

var now = new Date();

var res = [];

var len = 40; //显示个数

while (len–) {

res.unshift(now.toLocaleTimeString().replace(/^\D*/, ‘’));

now = new Date(now - 2000);

}

return res;

})(),

boundaryGap: false,

splitLine: {

show: false

},

axisTick: {

show: false

},

axisLine: {

lineStyle: {

color: ‘#2d67a7’

}

},

axisLabel: {

margin: 10,

textStyle: {

fontSize: 14

}

}

},

yAxis: {

type: ‘value’,

splitLine: {

show: false

},

axisTick: {

show: false

},

axisLine: {

lineStyle: {

color: ‘#2d67a7’

}

},

axisLabel: {

margin: 10,

textStyle: {

fontSize: 14

}

}

},

series: [{

name: ‘X轴’,

type: ‘line’,

smooth: true,

showSymbol: false,

symbol: ‘circle’,

symbolSize: 1,

data: xzhou3,

itemStyle: {

normal: barColor0,

emphasis: emColor0

},

lineStyle: {

normal: {

width: 2,

shadowColor: ‘rgba(0,0,0,0.6)’,

shadowBlur: 10,

shadowOffsetY: 5

}

}

}, {

name: ‘Y轴’,

type: ‘line’,

smooth: true,

showSymbol: false,

symbol: ‘circle’,

symbolSize: 1,

data: yzhou3,

itemStyle: {

normal: barColor1,

emphasis: emColor1

},

lineStyle: {

normal: {

width: 2,

shadowColor: ‘rgba(0,0,0,0.6)’,

shadowBlur: 10,

shadowOffsetY: 5

}

}

},

{

name: ‘Z轴’,

type: ‘line’,

smooth: true,

showSymbol: false,

symbol: ‘circle’,

symbolSize: 1,

data: zzhou3,

itemStyle: {

normal: barColor2,

emphasis: emColor2

},

lineStyle: {

normal: {

width: 2,

shadowColor: ‘rgba(0,0,0,0.6)’,

shadowBlur: 10,

shadowOffsetY: 5

}

}

}

]

}

setInterval(function() {

subLoadX = Math.random() * 100;

subLoadY = Math.random() * 100;

subLoadZ = Math.random() * 100;

xzhou3.shift();

xzhou3.push(subLoadX);

yzhou3.shift();

yzhou3.push(subLoadY);

zzhou3.shift();

zzhou3.push(subLoadZ);

axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ‘’);

option.xAxis.data.shift();

option.xAxis.data.push(axisData);

myChart.setOption(option);

}, 1000)

带宽图

option = {

backgroundColor: ‘#00265f’,

代码语言:javascript
复制
tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#57617B'
        }
    }
},
legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['增长数'],
    right: '4%',
    textStyle: {
        fontSize: 12,
        color: '#F1F1F3'
    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    data: ['4号', '5号', '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
    type: 'value',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    axisLabel: {
        margin: 10,
        textStyle: {
            fontSize: 14
        }
    },
    splitLine: {
        show: false
    }
}],
series: [{
    name: '增长数',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
        normal: {
            width: 1
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5ff6e9'
            }, {
                offset: 0.8,
                color: '#7370fd'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
        }
    },
    itemStyle: {
        normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12

        }
    },
    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]

};

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年12月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 占位图
  • 水平柱图
  • 动态数据
  • 动态数据2
  • 带宽图
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档