Echart

最新推荐文章于 2025-06-10 12:16:04 发布

原创最新推荐文章于 2025-06-10 12:16:04 发布 · 198 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用ECharts库创建并配置一个包含柱状图、折线图和虚线图的复杂图表。通过具体代码示例，展示了图表标题、图例、坐标轴、数据系列等元素的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('x_count_echart'));

// 指定图表的配置项和数据
var option = {
   color: ['#52BEDB'], //柱状图的颜色
       title: {
       text: '全国军民融合创新', //图表的名称
       x: 'center', //显示位置
       bottom:'0',
       textStyle:{
       color:'#000',
       fontSize:'20',
       }
       },
   legend: {
       data:['销量','销量1','销量2'],
       x: 'center',
       bottom:'60',
   },
   xAxis: { // x轴的设置
       name: '区域',
       nameLocation: 'start',
       nameTextStyle: {
           fontSize: 14,
           padding: [35,0,0,10],
           color: '#52BEDB'
       },
       data: ["区域","区域","区域","区域","区域","区域","区域","区域","区域"," "]
   },
   grid: {
       bottom: '20%',
       containLabel: true
          },
   yAxis: { //y轴的设置
       name: '个数',
       min: 200, //y轴刻度设置，区间为200-650
       max: 650,
       interval:50, //递增50
       nameTextStyle: {
           fontSize: 14,
           padding: [0,35,0,0],
           color: '#52BEDB'
       },
   axisLine: { // y轴线
       show:false
   },
   splitLine: { //y轴网格
       show: false
   },
               axisTick: { //y轴刻度线
                   show: false
               }
           },
           series: [{ //这里定义要显示的图形
               name: '销量',
               type: 'bar', //柱状图
               data: [470, 380, 360, 230, 210, 350, 600, 525, 425, 200]
           },
           {
               name:'销量1',
               type:'line', //折线图
               symbolSize:8,
               symbol: 'square', //点的样式为正方形
               itemStyle : { /*设置折线颜色*/
                   normal : {
                       color:'#E26A6A'
                   }
               },
               data:[400, 350, 340, 260, 252, 395, 650, 585, 525, 370]
           },
           {
               name:'销量2',
               type:'line', //虚线
               symbolSize:8,
               symbol: 'circle',//点的样式为圆形
               data:[240, 355, 350, 348, 340, 420, 480, 600, 625, 500],
               color:['#89C4F4'],
               smooth:false, //这是设置虚线所需属性
               itemStyle : { /*设置折线颜色*/
                   normal : {
                       borderColor: '#4C8E9F',
                       lineStyle: {
                           width:2,
                           type:'dotted' //线条样式，虚线
                       }
                   }
               }
           }
           ]
       };
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);