关于Echarts的使用以及修改图形样式

最新推荐文章于 2024-06-25 11:43:23 发布

小宋i

最新推荐文章于 2024-06-25 11:43:23 发布

阅读量6.3k

点赞数 2

文章标签： javascript jquery js

本文链接：https://blog.csdn.net/weixin_50641294/article/details/113093179

版权

关于Echarts的使用以及修改图形样式

1.引入js文件

echarts官方网址 https://echarts.apache.org/

下载js文件你可以通过以下几种方式获取 Apache EChartsTM。

从 Apache ECharts 官网下载界面获取官方源码包后构建。

在 ECharts 的 GitHub 获取。

通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

通过 jsDelivr 等 CDN 引入

不过这几种下载js文件比较麻烦，我charts是在https://www.bootcdn.cn/ bootCND里面搜索echarts，在里面直接下载，下载最短的一个

2.引入js文件

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

3.绘制一个简单的图标

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后在里面查找你想要的图像点进去查看完整代码，复制就行了，不过得修改一下你想放到那个div里面，例如

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

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

option && myChart.setOption(option);

这是我在插件随便找的一个图形，直接把代码复制过来了，把 document.getElementById('main')改为 document.getElementById('你想要放入的层就行了')

4.饼图的制作及修改样式

1.现在里面找一个饼图引入

2.放在div里面显示出来（效果如下）

3.修改样式

 var chartDom = document.querySelector('.point_chart');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      // 修改每个数据背景颜色
      color:['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        legend: {
        
        // 去掉下面的按钮
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
       
        series: [
            {
                name: '面积模式',
                // 代表饼图
                type: 'pie',
                // 修改半径  
                radius: [15, 86],
                // 整个图形的位置
                center: ['50%', '50%'],
                roseType: 'area',
                // itemStyle每个形状的样式
                itemStyle: {
                  // 修改圆角
                    borderRadius: 8
                },
                // data  value每个形状占的数量
                data: [
                  { value: 20, name: '云南' },
                  { value: 26, name: '北京' },
                  { value: 24, name: '山东' },
                  { value: 25, name: '河北' },
                  { value: 20, name: '江苏' },
                  { value: 25, name: '浙江' },
                  { value: 30, name: '四川' },
                  { value: 42, name: '湖北' }
              ]
            }
        ]
    };
    
    option && myChart.setOption(option);

最终效果

5.柱状图的制作及修改

1.引入的效果

2.修改样式

 var chartDom = document.querySelector('.user_chart');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      // grid设置图形本身的位置及宽和高
      grid: {
        width:'90%',
        height:'80%',
        top:20
      },
      xAxis: {
          type: 'category',
        // 柱子对应x轴的数据
          data:['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
          // axisline表示坐标轴轴线
          axisLine: {
            // 轴线颜色及轴线文字颜色，但有单独设置文字颜色的，可以覆盖这个颜色
            lineStyle: {
              color: "#013f4b"
            }
          },
          // 轴字体颜色
          axisLabel: {
            color: "#326ab3"
          },
        
      },
      yAxis: {
          type: 'value',
           // axisline表示坐标轴轴线
           axisLine: {
            // 轴线颜色及轴线文字颜色，但有单独设置文字颜色的，可以覆盖这个颜色
            lineStyle: {
              color: "#013f4b"
            }
          },
            // 轴字体颜色
            axisLabel: {
              color: "#326ab3"
            },
                //   坐标轴横线颜色
        splitLine: {
          lineStyle: {
            color: "#013f4b"
          }
        }
      },
      series: [{
        // 每个柱子的数据
          data: [2100, 1900, 1700, 1560, 1400, {  value: 1200,
            itemStyle: {
                color: '#254065'
            }}, {  value: 1200,
              itemStyle: {
                  color: '#254065'
              }}, {  value: 1200,
                itemStyle: {
                    color: '#254065'
                }}, 900, 750, 600, 480, 240],
          type: 'bar',
          // 给柱状图设置背景颜色
          // showBackground: true,
          // 给每个柱子设置渐变颜色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#00edf6'},
            
                    {offset: 1, color: '#007bd5'}
                ]
            )
        },
      }]
  };
    
    option && myChart.setOption(option);

3.最终效果

6.折线图的制作及修改

1.引入时的效果

2.修改样式

  var chartDom = document.querySelector('.sell_chart');
var myChart = echarts.init(chartDom);
var option;

option = {
  // 设置副标题
  title :{
    subtext:'单位(万)',
    top:-9,
    left:50,
    // 副标题字体颜色
    subtextStyle: {
        color:'#3777ca'
      }
},
  // 设置每条曲线的颜色
  color:['#ce0206','#02a8af'],
  // 设置图形宽高及位置
  grid: {
    left:40,
    width:'90%',
    height:'74%',
    top:20
  },
  legend: {
    data: ['预期销售额', '实际销售额'],
    left:'50%',
    // 修改颜色
    textStyle: {
      color: '#3777ca'
    }
},

  // x轴
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        // 轴线颜色
        lineStyle: {
          color: "#2f2f30"
        },
         // 轴字体颜色
         axisLabel: {
          color: "#326ab3"
        },
      },
      // y轴
      yAxis: {
        type: 'value',
        lineStyle: {
          color: "#2f2f30"
        },
         // 轴线颜色
         lineStyle: {
          color: "#2f2f30"
        },
         // 轴字体颜色
         axisLabel: {
          color: "#326ab3"
        },
                  //   坐标轴横线颜色
                  splitLine: {
                    lineStyle: {
                      color: "#013f4b"
                    }
                  }
    },
    series: [{
      name:'预期销售额',
        data: shuJu[0][0],
        type: 'line',
        smooth: true
    },
    {
      name:'实际销售额',
    
      type: 'line',
      stack: '总量',
      data: shuJu[0][1],
      // 变成曲线
      smooth: true
  },
  ]
    
  
  
};
option && myChart.setOption(option);

3.最终效果

7.饼图的制作

1.开始的效果

2.修改的样式

 var chartDom = document.querySelector('.progress_chart');
var myChart = echarts.init(chartDom);
var option;

option = {
   color:['#12274d','green','yellow','#00a7e2'],
 
   
    series: [
        {
          // 设置自身的位置
          center:['50%',100],
            name: '访问来源',
            type: 'pie',
            radius: ['80px', '100px'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
           
           
            data: [
                {value: 1},
                {value: 1},
                {value: 1},
                {value: 1},
                
            ]
        }
    ]
};

option && myChart.setOption(option);

3.最终效果

7.迁徙图引入

迁徙图：https://gallery.echartsjs.com/editor.html?c=xXL0yEybJq

4.在option前后加

 var chartDom = document.querySelector('.migrate_map');
  var myChart = echarts.init(chartDom);
  var option;
 option = {内容}



option && myChart.setOption(option);

5.最终效果