echarts

最新推荐文章于 2023-05-24 10:07:12 发布

qianjun111111

最新推荐文章于 2023-05-24 10:07:12 发布

阅读量193

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qianjun111111/article/details/123811262

版权

1柱状图

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="./js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width:800px; height: 600px;"></div>
       <script>
       // 01 创建实例
       var echart = echarts.init(document.getElementById("container"));
       // 02 设置option参数
       var option = {
           title:{
               text:"vue考试成绩分析图" //标题
           },
           legend:{data:["成绩"]}, //图例
           tooltip:{},               //鼠标提示
           xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},//x轴线
           yAxis:{},//y轴线
           series:[ //图数据
           // type 类型       // bar柱状图
           // data数据
           // name 名称注释和legend图例保持一致
               {type:"bar",data:[90,60,33,88,99],name:"成绩"},
               {type:"line",data:[88,66,55,77,48],name:"平均成绩",somooth:true},
               {type:"line",data:[10,20,15,6,3],name:"80分以上人数",somooth:true,areaStyle:{color:'#f70'}},
           ]
       }
       // 03 更新option
       echart.setOption(option);
       </script>
   </body>
</html>

运行效果

2 图表类型

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="./js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width:800px; height: 600px;"></div>
       <script>
           // 01 创建实例
           var echart = echarts.init(document.getElementById("container"));
           // 02 设置option参数
           var option = {

               legend: {
                   data: ["成绩", "平均成绩", "80分以上人数", "题型"]
               }, //图例
               tooltip: {}, //鼠标提示
               xAxis: {
                   data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
               }, //x轴线
               yAxis: {}, //y轴线
               series: [ //图数据
                   // type 类型       // bar柱状图
                   // data数据
                   // name 名称注释和legend图例保持一致

                   // pie饼形图
                   {
                       type: "pie",
                       data: [{
                               name: "选择题",
                               value: 50
                           },
                           {
                               name: "填空题",
                               value: 20
                           },
                           {
                               name: "问答题",
                               value: 30
                           },
                           {
                               name: "判断题",
                               value: 10
                           }
                       ],
                   name: "题型",
                   radius:["10%","30%"], //半径
                   top:"-50%",   //位置
                   left:"10%"
                   },
               ]
           }
           // 03 更新option
           echart.setOption(option);
       </script>
   </body>
</html>

运行效果

3 特殊样式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width: 800px; height: 600px;"></div>
       <script>
       var mycolor2 = {
       type: 'linear',
       x: 0,
       y: 0,
       x2: 0,
       y2: 1,
       colorStops: [{
       offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
       }, {
       offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
       }],
       global: false // 缺省为 false
       }
       var mycolor1 = {
       type: 'linear',
       x: 0,
       y: 0,
       x2: 0,
       y2: 1,
       colorStops: [{
       offset: 0, color: 'rgba(23, 135, 255, 1)' // 0% 处的颜色
       }, {
       offset: .7, color: 'rgba(27, 201, 249,1)' // 100% 处的颜色
       }],
       global: false // 缺省为 false
       }
       // 01 初始化
       var echart = echarts.init(document.getElementById("container"),'dark');
       // 02 定义选项
       var option = {
           title:{ text:"特殊样式"},    //标题
           tooltip:{},                   //提示
           legend:{data:["线","柱状"]},        // 图例
           xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]}, //x轴线
           yAxis:{},                    //y轴线
           series:[                     // 系列数据
               {name:"线",type:"line",data:[50,100,48,68,88],smooth:true,
               lineStyle:{width:10,cap:"round"},//线的样式 cap断点类型
               areaStyle:{color:mycolor2}//面的样式
               },
               {name:"柱状",type:"bar",data:[120,220,320,48,100],
                   itemStyle:{
                       borderRadius:[100,100,100,100],//圆角，左上，右上，右下，左下
                       color:mycolor1
                   }
               }
           ]
       }
       // 03 更新选项
       echart.setOption(option);
       </script>
   </body>
</html>

效果

4堆型图

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width: 800px; height: 600px;"></div>
       <script>

       // 01 初始化
       var echart = echarts.init(document.getElementById("container"),'dark');
       // 02 定义选项
       var option = {
           title:{ text:"堆叠图"},    //标题
           tooltip:{trigger:"axis"},//axis轴线，item元素                   //提示
           legend:{data:["ui","java","web","python"]},        // 图例
           xAxis:{}, //x轴线
           yAxis:{data:["2019","2020","2022"]},
           label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
           series:[                     // 系列数据
               {name:"ui",type:"bar",data:[120,80,70],stack:true,
                   // label标签 show显示 position位置,insideRight 内部右侧，formatter格式化
                   // {a} 系列名称 {b}轴线名称 {c}值
                   label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
               },
               {name:"java",type:"bar",data:[27,50,100],stack:true},
               {name:"web",type:"bar",data:[180,220,240],stack:true},
               {name:"python",type:"bar",data:[200,120,80],stack:true}
           ]
       }
       // 03 更新选项
       echart.setOption(option);
       </script>
   </body>
</html>

效果

5 地图

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width:1200px; height:800px"></div>
       <script src="js/feiyan.js"></script>
       <script type="text/javascript">
           // 获取省份数据，给每个省份添加name和value执行
           var province = data.data.feiyan.provinces.map(val=>({...val,value:val.sure_cnt,name:val.province}));
           console.log(province);
           var echart = echarts.init(document.getElementById("container"),'dark');
           var option= {
               title:{text:"地图"},
               tooltip:{},
               series:[
                   {name:"china",type:"map",mapType:"china",data:[]}
               ]
           };
           // 获取地图
           function getMap(obj={en:"china"}){
               // 请求数据
               fetch("./map/json/province/"+obj.en+".json")
               // 转换为json
               .then(res=>res.json())
               // 获取数据
               .then(res=>{
                   // 注册地图
                   echarts.registerMap(obj.en,res);
                   // 更新数据（指定省份数据）
                   option.series[0].data=province;

                   // 更新地图类型
                   option.series[0].mapType=obj.en;
                   // 更新option渲染
                   echart.setOption(option);
               })
           }
           getMap();

       </script>
   </body>
</html>

效果

6 富文本

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/echarts.min.js"></script>
   </head>
   <body>
       <div id="container" style="width:800px; height:600px"></div>
       <script type="text/javascript">
           var echart = echarts.init(document.getElementById("container"),'dark');
           var option= {
               title:{text:"网站访问来源"},
               tooltip:{},
               series:[
                   {type:"pie",name:"来源",radius:["30%","50%"],
                   data:[
                       {value:120,name:"百度",label:{
                           show:true,
                           position:"center",
                           // a 系列名称 b数据名称 c数据值 d百分百 big与small在rich定义好的样式
                           formatter:"{big|{d}}{small|%}\n{b}",
                           // 定义富文本样式样式
                           rich:{
                               big:{fontSize:"36px",fontWeight:900},
                               small:{fontSize:"12px",color:"#00aaff"}
                           }
                       }},
                       {value:25,name:"其他",label:{show:false}}
                   ]}
               ]
           };
           echart.setOption(option);
       </script>
   </body>
</html>