首页echart仪表盘渐变色完整代码

echart仪表盘渐变色完整代码

时间: 2023-07-02 09:20:58 浏览: 124

以下是一个使用 Echarts 绘制仪表盘并添加渐变色的完整代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 仪表盘渐变色示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '完成率', }], axisLine: { lineStyle: { width: 10, color: [ [0.2, '#228B22'], [0.8, '#48b'], [1, '#ff4500'] ] } }, axisTick: { length: 15, lineStyle: { color: 'auto', } }, splitLine: { length: 20, lineStyle: { color: 'auto', } }, axisLabel: { fontWeight: 'bold', fontSize: 12, color: '#333' }, pointer: { width: 3, length: '40%' }, title: { offsetCenter: [0, '-30%'], fontSize: 14, fontWeight: 'bold', color: '#333' }, detail: { offsetCenter: [0, '30%'], fontSize: 14, fontWeight: 'bold', color: '#333' }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中，我们使用 `axisLine` 配置项中的 `color` 属性来指定渐变色，使用了三个颜色值，分别表示渐变色的起始颜色、中间颜色和结束颜色。其中，每个颜色值都是一个数组，第一个元素表示颜色的位置，取值范围是 0 到 1，表示颜色在渐变中的位置，第二个元素表示颜色的值，可以是颜色名称、十六进制值或 RGB 值。在本例中，我们使用了绿色、蓝色和橙色作为渐变色。

阅读全文