echarts模板 html,echarts5.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'));

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

var option = {

title: {

text: '基础雷达图'

},

tooltip: {},

legend: {

data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']

},

radar: {

// shape: 'circle',

indicator: [

{ name: '销售(sales)', max: 6500},

{ name: '管理(Administration)', max: 16000},

{ name: '信息技术(Information Techology)', max: 30000},

{ name: '客服(Customer Support)', max: 38000},

{ name: '研发(Development)', max: 52000},

{ name: '市场(Marketing)', max: 25000}

]

},

series: [{

name: '预算 vs 开销(Budget vs spending)',

type: 'radar',

// areaStyle: {normal: {}},

data : [

{

value : [4300, 10000, 28000, 35000, 50000, 19000],

name : '预算分配(Allocated Budget)'

},

{

value : [5000, 14000, 28000, 31000, 42000, 21000],

name : '实际开销(Actual Spending)'

}

]

}]

};

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

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

原始数据

按行查看

历史