当前位置：首页 > article >正文

eCharts基础详解

article 2025/9/18 11:57:44

echarts图类型设置

1.title:标题组件
2.tooltip:提示框组件
3.legend：图例组件，展现了不同系列的标记(symbol)，颜色和名字
4.xAxis：直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。
5.yAxis:直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。
6.series:系列列表。每个系列通过 type 决定自己的图表类型。
series  type=line ——-折线图
series  type=bar ——-柱状图
series  type=pie ——-饼图

下面生成一个柱状图，贴上完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--引入echarts文件--><script src="../js/echarts.min.js"></script><script src="../js/echarts.js"></script><script src="../theme/dark.js"></script><title>柱状图</title>
</head>
<body><!--准备一个dom容器--><div id="main" style="width:600px;height:400px"></div><script type="text/javascript">// 基于准备好的dom，初始化echartsvar myChart = echarts.init(document.getElementById('main'));var option={title:{text:'第一个echarts'},tooltip:{},  //指示框legend:{data:['销量']},color:'pink',xAxis:{data:['苹果','李子','栗子','梨','草莓','菠萝']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,10,36,10,18,20]}]};myChart.setOption(option);</script>
</body>
</html>

生成的柱状图如下（粉色的小可爱）

然后改变一下类型 type:line (蓝色的小清新)

在来生成饼图，饼图是没有xy轴的，先给注释掉，type:pie ，另外饼图的data是有包含两个键值对的json组成的数组，如下

 data:[{value:5,name:'苹果'},{value:10,name:'李子'},{value:36,name:'栗子'},{value:10,name:'梨'},{value:18,name:'草莓'},{value:20,name:'菠萝'},]

然后我的饼图，设置了全局颜色，所以看起来比较多彩

饼图和折线图的结合 series配置两套

 series:[{name:'销量',type:'bar',// data:[//     {value:5,name:'苹果'},//     {value:10,name:'李子'},//     {value:36,name:'栗子'},//     {value:10,name:'梨'},//     {value:18,name:'草莓'},//     {value:20,name:'菠萝'},// ]data:[5,10,36,10,18,20],},{name:'销量',type:'line',color:'black',// data:[//     {value:5,name:'苹果'},//     {value:10,name:'李子'},//     {value:36,name:'栗子'},//     {value:10,name:'梨'},//     {value:18,name:'草莓'},//     {value:20,name:'菠萝'},// ]data:[5,10,36,10,18,20],},]

查看全文

http://www.lryc.cn/news/2412595.html