charts基础模型API（实用））

最新推荐文章于 2024-02-29 15:53:16 发布

VIP文章 dequan li

最新推荐文章于 2024-02-29 15:53:16 发布

阅读量798

点赞数

文章标签： js 前端

本文链接：https://blog.csdn.net/qq_48729513/article/details/118803016

版权

echarts

1、基础搭建

在---- head---- 里引入echart文件

<body>
    <div id="main" style="width: 500px;height: 500px;"></div>
</body>
<script>

    var myChart = echarts.init(document.getElementById('main'));
    option = {
   
        xAxis: {
   
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
   
            type: 'value'
        },
        series: [{
   
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
   
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }]
    };
    myChart.setOption(option);
</script>

2、设置边框

 itemStyle: {
   
      normal:{
   

          //设置渐变
          color: new echarts.graphic.LinearGradient(  
              0, 0, 0, 1,[
                  {
   offset: 0, color: '#000'},
                  {
   offset: 0.5, color: '#00GG00'},
                  {
   offset: 1, color: '#FFF'}

最低0.47元/天解锁文章

优惠劵

dequan li

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
charts基础模型API（实用））

echarts1、基础搭建在---- head---- 里引入echart文件<body> <div id="main" style="width: 500px;height: 500px;"></div></body><script> var myChart = echarts.init(document.getElementById('main')); option = { xAxis
复制链接

扫一扫