html4模板,echarts4.html

后台登录-X-admin2.2

特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 ECharts。 x-admin不承担任何版权问题。

注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。

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

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

// 指定图表的配置项和数据

option = {

backgroundColor: '#2c343c',

title: {

text: 'Customized Pie',

left: 'center',

top: 20,

textStyle: {

color: '#ccc'

}

},

tooltip : {

trigger: 'item',

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

},

visualMap: {

show: false,

min: 80,

max: 600,

inRange: {

colorLightness: [0, 1]

}

},

series : [

{

name:'访问来源',

type:'pie',

radius : '55%',

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

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:274, name:'联盟广告'},

{value:235, name:'视频广告'},

{value:400, name:'搜索引擎'}

].sort(function (a, b) { return a.value - b.value}),

roseType: 'angle',

label: {

normal: {

textStyle: {

color: 'rgba(255, 255, 255, 0.3)'

}

}

},

labelLine: {

normal: {

lineStyle: {

color: 'rgba(255, 255, 255, 0.3)'

},

smooth: 0.2,

length: 10,

length2: 20

}

},

itemStyle: {

normal: {

color: '#c23531',

shadowBlur: 200,

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

}

}

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史